CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Bhargav Patel
Bhargav Patel

Reputation: 151

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

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.

Upvotes: 2

Views: 3454

Answers (3)

Nikunj Sardhara
Nikunj Sardhara

Reputation: 638

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

Upvotes: 3

1w3j
1w3j

Reputation: 586

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

Upvotes: 1

mrsq
mrsq

Reputation: 235

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

Upvotes: 2

Related Questions