Bootstrap Modal popping up but has a "tinted" page and can't interact

bootstrap modal form
bootstrap modal not working
bootstrap 3.3.7 modal
bootstrap modal close event
bootstrap modal events
bootstrap 4 modal not working
react-bootstrap modal
bootstrap modal width

I am using bootstrap to set up a modal popup. When a button is clicked, the modal dialog opens, but the entire page is slightly "tinted", and I can't interact with the modal (the page essentially freezes). Do you know why this would be? Here is the code:


<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a>


<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Congratulations!</h4>
          <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <h4>Popover in a modal</h4>
            <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

            <h4>Tooltips in a modal</h4>
            <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>


            <h4>Overflowing text to show optional scrollbar</h4>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


Here are the included files:

<link media="all" type="text/css" rel="stylesheet" href="">
<link media="all" type="text/css" rel="stylesheet" href="">
<link media="all" type="text/css" rel="stylesheet" href="">

<link media="all" type="text/css" rel="stylesheet" href="">

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<script src=""></script>

EDIT: Happens in all browsers tried (Chrome, Firefox, Safari)

Ok, so I figured out the issue.

If the modal container has a fixed position or is within an element with fixed position this behavior will occur.

Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag .

This is what I did, and it worked.

Close Bootstrap Modal, Ok, so I figured out the issue. If the modal container has a fixed position or is within an element with fixed position this behavior will occur. Bootstrap 4 Modal. The Modal component is a dialog box/popup window that is displayed on top of the current page: Open modal

This happened to me, and it took ages to diagnose. If it happens to you, add this to your css:

div.modal div.modal-backdrop {
    z-index: 0;

EDIT: You may need more specificity for this setting to be picked up. As Nick Spoon suggests, you can use

body.modal-open div.modal-backdrop { 
    z-index: 0; 

And you may need to add more qualifiers, depending on what the rest of your CSS is doing. You can also use !important, but that's just sweeping the problem under the rug.

Bootstrap modal not displaying, But this has a nasty side effect as well: Because Angular re-renders the I get the modal that pops up and gets moved, and I can access it. Here Mudassar Ahmed Khan has explained with an example, how to open (show) Bootstrap Modal Popup Window using jQuery. The Button will be assigned a jQuery Click event handler. When the Button is clicked, the Bootstrap Modal Popup Window is opened (shown) on Client Side using jQuery.

Solved it by adding data-backdrop="false" to the main div as:

<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog">

Bootstrap Modal popping up but has a "tinted" page and can't , Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that's Each has its own role and hence should be used accordingly. You can check it out on our demo page. This defines whether or not you want the user to be able to close the modal by clicking the background. keyboard: if set to  On more than a few occasions I've run into issues with Bootstrap's Modal dialog rendering incorrectly with the dialog showing underneath the overlay. There are a number of ways around this problem, but none of them are universal that depend on how your pages are laid out. It's especially problematic for applications that dynamically render components where there's no good control on where the

I found a good fix for this problem here:

Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.

Bootstrap Modals, The behaviour can be fixed with I include bootstrap-modal.js but that code is already inside bootstrap.js! Edit: Just to clarify the modal pops up on load and I  The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.

If you want to open the print dialog on button present on modal itself and after printing your webpage is not accessible then it will definitely work for you rather then the window.print().

Use below code. First of all you need to close the modal dialog and open the print dialog after few seconds.

setTimeout(function() { printnow('printdiv', 10); }, 500);

Bootstrap Modal Dialog showing under Modal Background, Bootstrap modal forms are displayed-on-action pop-up forms that used for gathering data from a website visitors and register or log users. Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). $ ('#myModal'). modal ('handleUpdate').modal('dispose') Destroys an element’s modal. Events. Bootstrap’s modal class exposes a few events for hooking into modal functionality.

Understanding Bootstrap Modals, Modals are widely used to warn users for situations like session time out or to receive create very smart and flexible dialog boxes with the Bootstrap modal plugin. You can activate a Bootstrap modal by clicking on the button or link via data  I am creating a gridview page where user can click on link buttons to pop up bootstrap style modal pop up for add/change/delete. The modal pop up sits in an update panel and I use AsyncPostBackTrigger to invoke database update. Initially it seems to be working with no obviously issues.

modal data-dismiss not dismissing · Issue #3628 · twbs/bootstrap , Well, we have a very able and popular library to support modal pop-up dialogs in Angular, the ui.bootstrap dialog (http:// Hello, I want to reset value when modal pop up close. I am able to reset value, when click on cancel button and cross icon in modal pop up but how can How to trigger an event when bootstrap modal closes - jQuery Forum

Bootstrap Modal Form, Learn how to use the Bootstrap Modal form plugin to open a Formidable form or Go into your form's Settings and select Submit with ajax. If you would like to display a login form in a pop-up, follow the instructions below. I have developed a bootstrap form in project which opens up inside modal pop up on add new button. Working Fine!! But when i try to open the same modal pop up from c# code pop up does not open.

  • jQueryUI might be breaking things with it's modal CSS. Try removing the jQueryUI references in your JS and CSS and see if the modal works then
  • This did not solve it. The issue still persists after I took out the jqueryUI css and js
  • anyone else? Your help is greatly appreciated
  • Looks like you are missing a </div>...
  • I found this answer to be really helpful: Bootstrap Modal Appearing Under Background
  • I had the exact same problem. Thank you.
  • This is the more correct fix than changing the modal-backdrop's z-index (answer) below. Changing the z-index does not properly fade out the body's content sometimes.
  • Thanks! A variation of this worked for me: body.modal-open div.modal-backdrop { z-index: 0; }
  • This answer did not work for me but @nickspoon 's comment did
  • Yes, that can happen. You might need more specificity for it to get picked up. I've just encountered the same problem in a new project, and saved my own bacon with this answer. Big thanks to me from over a year ago.
  • Perfect. This was my exact problem. I had a z-index setting of 1 on one of my div's.. What was mentioned to 0 worked but the div underneath was visible still while everything else was shadowed out, which looked cool but I had to put the modal setting to the same z-index or higher has the div it was overlaying for my issue to be fixed. Thanks for this!!
  • Worked here. Probably saved me hours.
  • By far the easiest and cleanest method, doesn't require mods to the CSS and scope is limited to the modal in question.