Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

button:

<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> 

modal:

<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>           <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>              <hr>              <h4>Overflowing text to show optional scrollbar</h4>             <p>body</p>           </div>           <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>          </div><!-- /.modal-content -->       </div><!-- /.modal-dialog -->     </div><!-- /.modal --> 

EDIT:

Here are the included files:

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css"> <link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css"> <link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">  <link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css">  <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <script src="http://crowdtest.dev:8888/assets/js/script.js"></script> <script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"></script>  <script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"></script> 

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

like image 597
user1072337 Avatar asked Jul 28 '13 19:07

user1072337


People also ask

How do I stop the background of a modal window from popping up?

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.

How do I stop Bootstrap modal from hiding when clicking outside?

Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static" , allows you keep modal pop-up opened when clicking on Gray area.

How do I make Bootstrap modal visible?

Answer: Use the modal('show') Method You can simply use the modal('show') method to show or open the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('hide') and modal('toggle') .

How do I stop Bootstrap modal pop up?

Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.


2 Answers

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.

like image 155
user1072337 Avatar answered Sep 25 '22 08:09

user1072337


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.

like image 22
Rob Lyndon Avatar answered Sep 22 '22 08:09

Rob Lyndon