Question posted in 
I am using the Bootstrap modal a bit non-traditionally in that my modal is fixed to the bottom of the window, like a GDPR “accept cookies” notice.
I have also disabled the gray overlay that appears by setting the “backdrop” option to “false”, per the Bootstrap Modal Options, so the user can mouse-scroll outside the modal and still see their website, but they can’t click on anything on the website because the parent modal container is full-height/full-width with a higher z-index, even though it’s transparent.
Here’s code illustrating the issue of not being able to click a link or interact with text while the modal is shown.
jQuery(document).ready(function($) {
$('#storyGate').modal({backdrop: false});
$('#storyGate').on('shown.bs.modal', function (e) {
$("body").removeClass("modal-open");
});
}); /* Story Gate Styles */
#storyGate .modal-dialog {
max-width: 100%;
margin-top: 0;
}
#storyGate .modal-content {
border: 0;
border-radius: 0;
background: #ca2742;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade m-0" id="storyGate" tabindex="-1" role="dialog" aria-labelledby="shareStoryLabel" aria-hidden="true">
<div class="modal-dialog fixed-bottom w-100 m-0" role="document">
<div class="modal-content">
<div class="modal-body p-2">
<div class="d-flex justify-content-between align-items-center">
<p class="m-0 text-white">Have you ever eaten ice cream?</p>
<div class="buttons d-flex flex-column flex-sm-row pr-4">
<a href="#!yes" role="button" class="btn btn-light mr-md-2 my-2">Yes</a>
<a href="#!no" role="button" class="btn btn-outline-light close-modal my-2 mr-0" data-dismiss="modal">No</a>
</div>
</div>
</div>
</div>
</div>
</div>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque</strong> <a href="http://stackoverflow.com">why can't I click this</a> et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>Thanks!
2
Answers
This is happening because of Bootstrap applying unwanted css(only in our case) on
modalclass…In the above css
.modalhavetop:0;bottom:0;right:0;left:0;. in this case, the modal will take100%heightandwidth. so we just overwritetopandlefttoautolike below…We can solve this by css too…
just your code with extra
.modal {position: fixed;
top: unset!important;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
}
or we can say only adding
top: unset!important;css for modal will work.modal {top: unset!important;
}