CODEWITHSUNDEEP
htmlcsstwitter-bootstrapiframebootstrap-modal
Vikum Dheemantha
Vikum Dheemantha

Reputation: 843

Bootstrap modal popup doesn't work while there is a iframe on page

I want to popup bootstrap modal from navbar button, but there is a iframe inside the main page (not inside the model). When I remove the iframe from the frame the modal pop-up is working perfectly. But if there is an iframe, the model doesn't work (the modal window is inside the main page not in the iFrame).

Here is my code for toggle the modal window :

<a href="#myModal" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon glyphicon-cog"></span>&nbsp;&nbsp;Change Password</a>

Here is my code of model:

<div class="modal fade" id="myModal">
 <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Modal</h4>
    </div>
    <div class="modal-body">
        <!-- Some content -->
    </div>
    <div class="modal-footer">
        <!-- Some content -->
    </div>
  </div>
 </div>
</div>

Here is my code of iframe:

<iframe name="mainCntnt" src="Pages/main/index.php?" class="frame" />

and CSS code for .frame:

.frame{
    width: 100%;
    height:100%;
    border:none;
    border-radius:10px;
}

How can I solve this without removing iframe?

Upvotes: 2

Views: 2393

Answers (1)

Ramesh Prasad
Ramesh Prasad

Reputation: 70

Use 

<iframe name="mainCntnt" src="Pages/main/index.php?" class="frame"></iframe>

Please note the closing tag

Upvotes: 4

Related Questions