Menu
Go to this site, click "Log In" in the top right corner, and a twitter-bootstrap modal window will pop out but be grayed out.
Why does this happen?
532
The key idea is to have pointer-events: none; for the body when modal is open. But the specific elements you want to be interacted with should have e.g. pointer-events: auto; . In the example you can click both buttons when dialog is hidden, but only Toggle Dialog button when dialog is shown.
Add data-backdrop="false" option as attribute to the button which opens the modal. Save this answer. Show activity on this post. I was able to use the following snippet to hide the model overlay by just re-hiding the modal when the shown.
To show a bootstrap modal inside a div the logic behind the above code is to append the HTML code of the modal as well as the modal-backdrop inside that specific div(blue div whose position is relative) and then making the CSS for modal and modal-backdrop to position:absolute so that the modal and its background gets ...
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not.
It's because .navbar-fixed-top has a z-index of 1030 while the modal backdrop has a z-index of 1040, causing the modal to overlay the navbar.
To fix this, just adjust the .modal-backdrop z-index value to be lower than 1030 - e.g.
.modal-backdrop { z-index: 1020; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
