Modal is unresponsive and locks everything on screen <p>I'm trying to make a modal for the logging the user in. However, when my modal pops up, everything (including the modal itself is getting faded or greyed out). I'm unable to click on anything be it the background or the buttons on the modal. Usually, I should be able to dismiss the modal by clicking elsewhere or on the close button of the modal. But now, I'm unable to close it by any means. I have to reload the page to close the modal.</p> <p>Two scripts which I had to load to get the modal working at all:</p> <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt; </code></pre> <p>Here's my modal code:</p> <pre><code> &lt;div class="modal fade" id="myModal" role="dialog"&gt; &lt;div class="modal-dialog"&gt; &lt;!-- Modal content--&gt; &lt;div class="modal-content" style="z-index:99999999;"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt; &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;Some text in the modal.&lt;/p&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here's the link that calls the modal: </p> <pre><code>&lt;div id="fh5co-page"&gt; &lt;header id="fh5co-header" role="banner" style="Border-bottom:solid;position:fixed;border-width:1px;background-color:rgba(127,127,127,0.85);"&gt; &lt;div class="container"&gt; &lt;div class="header-inner"&gt; &lt;a href="#"&gt;&lt;img alt="XYZ" class="img-responsive" src="{% static 'assets/images/XYZimage.png' %}" style="float:left;height:70px;width:180px;"&gt;&lt;/a&gt; &lt;nav role="navigation" style="float:right;margin-top:4%;"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="about.html"&gt;View Packages&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.html"&gt;Try a test!&lt;/a&gt;&lt;/li&gt; &lt;li class="cta"&gt;&lt;a href="#" data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; </code></pre> <p>What needs to change here? Please help! Thanks!</p> <p>Screenshot:<a href="https://i.stack.imgur.com/qY1eR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qY1eR.png" alt="enter image description here"></a></p> <p>CSS code for class cta, header-inner, fh5co-header, and fh5co-page:</p> <pre><code>#fh5co-header nav ul li.cta { margin-left: 20px; } #fh5co-header nav ul li.cta a { padding-left: 16px !important; padding-right: 16px !important; padding-top: 7px !important; padding-bottom: 7px !important; border: 2px solid rgba(255, 255, 255, 0.7); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } #fh5co-header nav ul li.cta a:hover { background: #fff; color: #00B906; } #fh5co-header nav ul li.cta a:hover:after { display: none; } #fh5co-offcanvas ul li.cta { margin-left: 0; margin-top: 20px; display: block; float: left; } #fh5co-offcanvas ul li.cta a { padding-left: 16px !important; padding-right: 16px !important; padding-top: 7px !important; padding-bottom: 7px !important; border: 2px solid rgba(255, 255, 255, 0.7); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } #fh5co-offcanvas ul li.cta a:hover { background: #fff; text-decoration: none; } #fh5co-offcanvas ul li.cta a:hover:after { display: none; } #fh5co-page { position: relative; z-index: 2; background: #fff; } #fh5co-offcanvas, .fh5co-nav-toggle, #fh5co-page { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } #fh5co-offcanvas, .fh5co-nav-toggle, #fh5co-page { position: relative; } #fh5co-page { z-index: 2; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .offcanvas-visible #fh5co-page { -moz-transform: translateX(-275px); -webkit-transform: translateX(-275px); -ms-transform: translateX(-275px); -o-transform: translateX(-275px); transform: translateX(-275px); } #fh5co-header { position: absolute; z-index: 1001; width: 100%; margin: 10px 0 0 0; } @media screen and (max-width: 768px) { #fh5co-header { margin: 0px 0 0 0; } } #fh5co-header .header-inner { height: 70px; /* padding-left: 20px; padding-right: 20px; */ float: left; width: 100%; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; } #fh5co-header h1 { float: left; padding: 0; font-weight: 700; line-height: 0; font-size: 30px; } #fh5co-header h1 a { color: white; } #fh5co-header h1 a &gt; span { color: #00B906; } #fh5co-header h1 a:hover, #fh5co-header h1 a:active, #fh5co-header h1 a:focus { text-decoration: none; outline: none; } #fh5co-header h1, #fh5co-header nav { /* margin: 38px 0 0 0; */ margin: 0 0 0 0; } #fh5co-header nav { float: right; padding: 0; } @media screen and (max-width: 768px) { #fh5co-header nav { display: none; } } #fh5co-header nav ul { padding: 0; margin: 0 -0px 0 0; line-height: 0; } #fh5co-header nav ul li { padding: 0; margin: 0; list-style: none; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } #fh5co-header nav ul li a { color: rgba(255, 255, 255, 0.7); font-size: 18px; padding: 10px; position: relative; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } #fh5co-header nav ul li a i { line-height: 0; font-size: 20px; position: relative; top: 3px; } #fh5co-header nav ul li a:after { content: ""; position: absolute; height: 2px; bottom: 7px; left: 10px; right: 10px; background-color: #fff; visibility: hidden; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #fh5co-header nav ul li a:hover { text-decoration: none; color: white; } #fh5co-header nav ul li a:hover:after { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } #fh5co-header nav ul li a:active, #fh5co-header nav ul li a:focus { outline: none; text-decoration: none; } #fh5co-header nav ul li.cta { margin-left: 20px; } #fh5co-header nav ul li.cta a { padding-left: 16px !important; padding-right: 16px !important; padding-top: 7px !important; padding-bottom: 7px !important; border: 2px solid rgba(255, 255, 255, 0.7); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } #fh5co-header nav ul li.cta a:hover { background: #fff; color: #00B906; } #fh5co-header nav ul li.cta a:hover:after { display: none; } #fh5co-header nav ul li.active a { text-decoration: none; color: white; } #fh5co-header nav ul li.active a:after { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } </code></pre> <p>Screenshot of Modal with Z-index higher than page header element: <a href="https://i.stack.imgur.com/L9Cl5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L9Cl5.png" alt="enter image description here"></a></p> <p>Screenshot of Modal with Z-index lower than page header: <a href="https://i.stack.imgur.com/MXTwc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MXTwc.png" alt="enter image description here"></a></p>