CODEWITHSUNDEEP
phpcsshtmltwitter-bootstrap-3
user4157552
user4157552

Reputation:

Why does modal window become hidden after adding css code? (Bootstrap)

I have created modal window. You can see that it works well here . http://www.bootply.com/R3JfdhIPwu

Now I need to devide page to 2 parts - left and right ones where right will be fixed. 

 .right-main {
 position: fixed; 
 }

As soon as I have added this line to css modal window became hidden: http://www.bootply.com/aYhMZ3fLlM

Does anyone have ideas about solution for it, how to make it visible?

Upvotes: 1

Views: 83

Answers (1)

Adam Fratino
Adam Fratino

Reputation: 1251

Simply move your modal markup outside of .right-main. Modal positioning is typically independent of the DOM structure. I'd recommend moving it to the footer of your DOM, since it doesn't need to be rendered immediately. Also be sure it's not nested in any elements it might inherit styles from (in this case .right-main).

Example: http://www.bootply.com/QfzMfbTahn

<div class="right-main">
  <a class="clickable" style=" text-decoration: none; font-size:100px; border-bottom:2px dashed;" data-toggle="modal" data-target="#basicModal">Test</a>
</div>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </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>

Upvotes: 1

Related Questions