skip to Main Content

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


  1. This is happening because of Bootstrap applying unwanted css(only in our case) on modal class…

    .modal {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        display: none;
        overflow: hidden;
        outline: 0;
    }
    

    In the above css .modal have top:0; bottom:0; right:0; left:0;. in this case, the modal will take 100% height and width. so we just overwrite top and left to auto like below…

    $('#storyGate').css({'top':'auto', 'left':'auto'});
    

    We can solve this by css too…

    .modal{
         top:auto !important;
         left:auto !important;
    }
    
    jQuery(document).ready(function($) {
          
      $('#storyGate').modal({backdrop: false});
      $('#storyGate').on('shown.bs.modal', function (e) {
        $("body").removeClass("modal-open");
        
      });		
    $('#storyGate').css({'top':'auto', 'left':'auto'});
    });
    /* 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>
    Login or Signup to reply.
  2. 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;
    }

    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;
    }
    
    
    .modal {
        position: fixed;
        top: unset!important;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        display: none;
        overflow: hidden;
        outline: 0;
    }
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search