bootstrap模态覆盖内容

Question

我正在尝试在我的页面中使用模式。我已经复制了 Joomla 网页的源代码并将其用作模板，我想在页面上使用模式。但是我注意到，当我将内容放入模态 div 时，它会在隐藏时阻止页面内容。无法点击页面上的任何可点击内容，但可以正常查看页面。当没有内容或内容较少时，可以使用该页面。我希望我能表达问题。有什么想法可以解决这个问题吗？

bootstrap版本为2.3.2 页眉

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="http://www.mywebpage.com/sertifikalar/sertifikalar.html" />
    <meta name="title" content="Sertifikalarımız" />
    <meta property="og:url" content="http://www.mywebpage.com/sertifikalar/sertifikalar.html" />
    <meta property="og:title" content="Sertifikalarımız" />
    <meta property="og:type" content="article" />
    <meta property="og:description" content=" " />
    <meta name="description" content=" " />
    <meta name="generator" content="MYOB" />
    <title>Sertifikalarımız</title>
    <link href="http://www.mywebpage.com/component/search/?Itemid=114&amp;format=opensearch" rel="search" title="Ara Erdem Tekstil" type="application/opensearchdescription+xml" />
    <link href="http://www.mywebpage.com/templates/erdem/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
    <link href="http://www.mywebpage.com/media/k2/assets/css/magnific-popup.css?v2.7.0" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/media/k2/assets/css/k2.fonts.css?v2.7.0" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/components/com_k2/css/k2.css?v2.7.0" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/media/mod_languages/css/template.css" rel="stylesheet" type="text/css" />
    <link href="http://www.mywebpage.com/media/jui/css/chosen.css" rel="stylesheet" type="text/css" />
    <script src="http://www.mywebpage.com/media/template/gzip.php?jquery.min-98686440.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/template/gzip.php?jquery-noconflict-b74a957e.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/template/gzip.php?jquery-migrate.min-5d9957cb.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/k2/assets/js/jquery.magnific-popup.min.js?v2.7.0" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/k2/assets/js/k2.frontend.js?v2.7.0&amp;sitepath=/" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/template/gzip.php?bootstrap.min-0fadd2ee.js" type="text/javascript"></script>
    <script src="http://www.mywebpage.com/media/jui/js/chosen.jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function (){
            jQuery('.advancedSelect').chosen({"disable_search_threshold":10,"search_contains":true,"allow_single_deselect":true,"placeholder_text_multiple":"Type or select some options","placeholder_text_single":"Bir se\u00e7enek se\u00e7iniz","no_results_text":"Hi\u00e7bir sonu\u00e7 e\u015fle\u015fmedi"});
        });
    </script>
    <style type="text/css">.sige_cont_0 {width:205px;height:215px;float:left;display:inline-block;}
    </style>
    <link rel="stylesheet" href="http://www.mywebpage.com/plugins/content/sige/plugin_sige/sige.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.mywebpage.com/plugins/content/sige/plugin_sige/venobox/venobox.js"></script>
    <script type="text/javascript">jQuery(document).ready(function(){jQuery('.venobox').venobox();});</script>
    <link rel="stylesheet" href="http://www.mywebpage.com/plugins/content/sige/plugin_sige/venobox/venobox.css" type="text/css" media="screen"/>

    <link rel="apple-touch-icon-precomposed" href="http://www.mywebpage.com/templates/erdem/apple_touch_icon.png">
    <link rel="stylesheet" href="http://www.mywebpage.com/media/template/gzip.php?bootstrap-860ec88d.css">
    <link rel="stylesheet" href="http://www.mywebpage.com/media/template/gzip.php?theme-c590bafc.css">
    <script src="http://www.mywebpage.com/media/template/gzip.php?theme-d71f4fad.js"></script>
</head>

my modal link :

<a  href="#" data-toggle="modal" data-target="#exampleModal"><img src="some_image.jpg"></a>

and my modal div:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-3">
                    <img src="http://www.mywebpage.com/images/some_other_image.jpg" />
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我找到了解决方案：joomla bootstrap.css .modal 没有 display:none；我刚刚添加了 display:none；那么问题就解决了

bootstrap模态覆盖内容

bootstrap modal covers the content

joomla

bootstrap-modal