Bootstrap modal appearing under background
If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.
Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.
Here are a couple ways to do this:
- 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
</body>
. - Alternatively, you can remove
position:
CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.
Bootstrap Modal sitting behind backdrop
Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
Demo
They hint at this solution in the documentation.
Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.
Bootstrap Modal sitting behind Backdrop in Chrome
The style -webkit-overflow-scrolling: touch;
in section#maincontainer
is causing this to happen as it seems to be conflicting with overflow: auto
.
I believe that -webkit-overflow-scrolling: touch;
is supposed to be used to provide touch screen scrolling overflow within elements that use fixed positioning - so I don't think you need to apply it to section#maincontainer
.
You might however want to apply it to modal-body
as the parent uses fixed positioning and the content may overflow.
http://css-tricks.com/mobile-webkit-overflow-scrolling/
Bootstrap modal goes behind the backdrop and users can't clic?
OK - to fix instead of rendering the modal-iframe-enquiry
html in the canvas
render it before the canvas or after it. e.g.
.......
<div class="modal fade in" id="modal-iframe-inquiry" tabindex="-1" role="dialog" aria-labelledby="modal-iframe-inquiry-title" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="modal-iframe-inquiry-title">Inquire about</h4>
</div>
<div class="modal-body">
<div class="embed-responsive" style="height: 640px;">
<iframe src="https://app.kigo.net/public/inquiry_embed/2-a77d11161e667005ce29f22b3e7a8d04-1738-f1db7ab2c4c99c15b210e92bd0f90239"></iframe>
</div>
</div>
</div>
</div>
</div><div class="canvas canvas-property-show">
......
Related Topics
Using Twitter Bootstrap 2.0 - How to Make Equal Column Heights
Css: Background Image on Background Color
Is There a 'Box-Shadow-Color' Property
Make Column Fixed Position in Bootstrap
Zoom Control and Streetview Not Showing on My Google Map
Bootstrap 3: Pull-Right for Col-Lg Only
Background-Size in Shorthand Background Property (Css3)
Continuous CSS Rotation Animation on Hover, Animated Back to 0Deg on Hover Out
Why Use an Attribute Selector to Match Classes
How to Prevent a CSS Keyframe Animation from Running on Page Load
IE7 and the CSS Table-Cell Property
What Does the Double Colon (::) Mean in CSS
How to Decrease Image Brightness in CSS
Bootstrap: Position of Dropdown Menu Relative to Navbar Item