Clever Geek Handbook

Exposing element outside of modal background in CSS Bootstrap jquery modal

I am using the Bootstrap Modal CSS feature and it works great. However, I want to add functionality that, while the modal dialog is open and the rest of the web page is closed by .modal-backdrop, one of the external elements from elsewhere within the page structure can be exposed over the background:

<div id="outside-element">
  I want this element exposed even while the modal is active,
  upon clicking the button in the modal dialog box
</div>

<div id="help-box" class="modal fade" data-backdrop="static" data-keyboard="false" data-show="true" tabindex="-1" role="dialog" aria-labelledby="help-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
              Click this button to show the outside element:
              <button type="button" class="btn" aria-hidden="true" id="test-item">Click it!</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  (function($) {
     $('#test-item').click(function() {
        $('#outside-element').attr('style','zIndex:1041');
     });
  })(jQuery);
</script>

As you can see in my current attempt above, I am setting the z-index of the outer element to 1041, which is one higher than the .modal-backdrop (1040) parameter. It doesn't do what I want (namely, placing an outer # element on top of the modal background), even though the code sounds and "works" (ie, permanently changes the z-index).

+3


source to share


2 answers


It would be great if you have a fiddle to show your code so that we can run it and see what happens.

You will need to specify the position of the element for the z-index to take effect:



#outside-element {
   position: relative;
   z-index: 1041;
}
+1


source


.modal-backdrop has a z-index of 1040, but .modal (# help-box) itself has a z-index of 1050, so if your outer element needs to be in front of the background and in front of the dialog box, you will need to assign it z-index 1051. not 1041.

If it's only needed in front of the background, but won't overlap with the dialog, then a z-index of 1041 should work, but as @uapuap mentioned, you'll also need to give it a position, eg position: relative

.



Here's a fiddle showing it works, with an outer element just in front of the background, with a z-index of 1041, and position: relative

:

http://jsfiddle.net/fgyja20w/

0


source






More articles:


All Articles