Not able to use modal in parent element with position as fixed

Question

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.

I got it working with same HTML structure and little different CSS. https://codepen.io/anon/pen/yMPOpo — Bhargav Patel, Mar 16 '17 at 18:09

score 3 · Answer 1 · edited Mar 16 '17 at 18:03

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

edited Mar 16 '17 at 18:03

Lee Taylor

7,761
16
33
49

answered Mar 16 '17 at 18:01

Nikunj Sardhara

638
1
5
20

score 2 · Answer 2 · answered Mar 16 '17 at 17:54

2

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

answered Mar 16 '17 at 17:54

mrsq

235
2
14

1w3j · Answer 3 · 2017-03-16T18:03:51.323

1

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

edited Mar 16 '17 at 18:03

answered Mar 16 '17 at 17:57

1w3j

566
8
24

1

I have to use fixed parent element, https://codepen.io/anon/pen/yMPOpo, this is the solution I got. – Bhargav Patel Mar 16 '17 at 18:08
The `button` looks overlapped and it is above the backdrop. If the fixed parent is so important, well then. – 1w3j Mar 18 '17 at 16:40

Not able to use modal in parent element with position as fixed

3 Answers3