Hi am try to use bootstrap modal inside of fixed positioned parent element. But seems like its not working as expected. Here is an example,

<div class="fixed">
  <div>
    <div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>
  </div>
</div>
</div>

Note: I would like to keep my HTML structure as it is.

Hi am try to use bootstrap modal inside of fixed positioned parent element. But seems like its not working as expected. Here is an example,

<div class="fixed">
  <div>
    <div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>
  </div>
</div>
</div>

https://codepen.io/anon/pen/yMPOpo

Note: I would like to keep my HTML structure as it is.

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow edited Mar 16, 2017 at 17:44 stackoverfloweth 6,91755 gold badges4444 silver badges7575 bronze badges asked Mar 16, 2017 at 17:44 Bhargav PatelBhargav Patel 15122 silver badges1010 bronze badges 3

• Why do you need to use position:fixed? – Lee Taylor Commented Mar 16, 2017 at 17:54
• Because parent element needs to have position as fixed. – Bhargav Patel Commented Mar 16, 2017 at 18:04
• I got it working with same HTML structure and little different CSS. codepen.io/anon/pen/yMPOpo – Bhargav Patel Commented Mar 16, 2017 at 18:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You just have to lower the z-index of backdrop of modal,

Try this simple CSS and you are good to go

.modal-backdrop{
    z-index:-1;
}

What is the issue? it's not clickable?

Trying setting the modal to position:relative and give it a z-index.

See here: https://codepen.io/anon/pen/wJPWdr

.modal-backdrop.in {
  position:relative;
  z-index:100;
}

Short answer: Remove fixed class

Codepen: https://codepen.io/anon/pen/dvZXVG

Here, a question with the same issue: z-index not working with fixed positioning

or MDN documentation: The stacking context