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

• 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

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