bootstrap模态覆盖内容
bootstrap modal covers the content
我正在尝试在我的页面中使用模式。我已经复制了 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&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&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">×</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>
我找到了解决方案:joomla bootstrap.css .modal 没有 display:none;我刚刚添加了 display:none;那么问题就解决了
我正在尝试在我的页面中使用模式。我已经复制了 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&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&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">×</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>
我找到了解决方案:joomla bootstrap.css .modal 没有 display:none;我刚刚添加了 display:none;那么问题就解决了