I am trying to use a modal in my page. I have copied the source code of a Joomla web page and use it as a template and I want to use a modal on the page. However I have noticed when I put content in the modal div it blocks the content of the page while being hidden. There is no way to click on any clickable content on the page however the page can be viewed properly. And when there is no or less content it is possible to use the page. I hope I could express the problem. Any ideas how to solve this issue ?
bootstrap version is 2.3.2 page head
<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>
I found the solution: joomla bootstrap.css .modal does not have display:none; I just added display:none; then the problem is solved