CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapiframetwitter-bootstrap-3
user3521008
user3521008

Reputation: 93

Using getBoostrap , modal (popup) and an iframe

I have a main page which contains an iframe, in this iframe, I have a button to click to make running a popup but only runs inside the iframe and I want to be global to the homepage.

this is the code for modal using getboostrap I have this code in homepage:

<div class="modal fade"  id="myModal">
    <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </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><!-- /.modal-content -->

this is the code for the button on the iframe:

<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>

The problem is that I cant access to the item in the homepage with id="mymodal".

Thanks

Upvotes: 0

Views: 119

Answers (1)

paulalexandru
paulalexandru

Reputation: 9530

You must create a javascript function in your homepage and while you click inside the iframe on that button you must access the homepage function ussing parent.myfunction('myModal'); or your current id.

So in your homepage you will have something like this:

function myfunction(id){
    //open the modal with the id = your entry id
}

And inside the iframe you won't have this anymore:

<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>

insted you would have:

<button type="button" class="btn btn-default btn-lg" onclick="parent.myfunction('myModal')">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>

Upvotes: 2

Related Questions