open a popup outside the iframe but link is inside the iframe

Question

In a html page i have include one iFrame.

In iFrame, have one link,

<a href="#" class="modal {targetelement:'#newstyle',closetext:'Close details',opentext:'View details'}">open window</a>

if i am adding the link and popup html on parent window its working fine.

but if i am adding link on inside the iframe popup html is not opening.

My exact requirment : open the popup above the iframe.

i can move the position of popup html ( inside iframe or parent page ) anywhere but cant change the position of <a href="#" id="modelboxnew">open window</a> its should be in iframe only

Here is my popup

<div  id="newstyle" > xyax text ..my popup html </div>

Answer 1

Your iframe is effectively a completely different page, so it's probably not working because your modal javascript doesn't exist in the iframe's page. That being said, even if you moved all your javascript inside the iframe, lauching the modal from in there would keep it trapped within the iframe.

Instead you want all your javascript and modal html/css stuff in the parent window and then from your iframe link call a popup launch function that exists in the parent window. So without knowing your exact code or what frameworks you're using, the basic idea in simple terms is to do the following (assuming jquery since you tagged the question as such)...

In your main window:

<script type="text/javascript" >
    function showPopup() {
        $("#newstyle").dialog();
    }
</script>
...
<div id="newstyle" > xyax text ..my popup html </div>

In your modal:

<script type="text/javascript">
    $(function() {
        $("#modelboxnew").click(function() {
            parent.showPopup();
        });
    });
</script>
...
<a href="#" id="modelboxnew" >open window</a>

Note that you need to be in control of both the main page & the iframe and they need to be hosted from the same domain for this to not be blocked by the browser's security.

Answer 2

I ran into this when I was making a post style feed dialog where I would click the "hearts" and it would show an iframe of the people who loved it. The popup dialog would show when the user clicks on a picture and it would give them a popup with a link to that picture's profile page, and a link to message. I pass a variable to the parent iframe to make the links work. Here is where I got the popup example I used: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

in my outer iframe I put the popup right next to the iframe the pictures are getting rendered. then I use java to trigger it. the only thing I had to do was change the javascript portion that I left in the loved post iframe to the new location of the popup container. The java call gets rendered during the mysql result loop phase.

<?php 

   if ($count>0){
   echo '<div style="max-width:10em;"><table border=1 style=" border-color:#696969;">';
    while ($data = $result->fetch_row()) {
             echo '<tr>';
       for ($m=0; $m<$result->field_count; $m++) {
       if ($m=="0"){
       $picSrc= $data[$m]; 
         }else if ($m=="1"){
       $usrName=$data[$m];
   }else if ($m=="2"){
    $userRec=  $data[$m];
           }
  }
    echo '<td style="background-color:#eac3a8;"><img src="'.$picSrc.'"  onclick="myFunction('.$userRec.','.$usrName.')"> <br>';                                        
        echo '</tr>';
       }
        echo '</table></div>';
           $result->close();
            } else {
           echo "No one has loved this posted";
             }

  // since I am rendering dynamically, I need to encapsulate the JavaScript into php, and pass the link html to the popup. 
   //$pstId is my id for the posting in the feed
echo '<script>
  function myFunction(a,b) {
     var userRec=a;
     var usrName=b;
     var links=" <a href=\'visitprofile.php?usr="+userRec+"\' target=\'_blank\'>Visit "+ usrName + "\'s Profile</a> <br> <a href=\'messagethem.php?usr="+userRec+"\' target=\'_blank\'>Send  "+ usrName +"a message </a>";
     var popup = parent.document.getElementById("'.$pstId.'");
      popup.innerHTML=links;
     popup.classList.toggle("show");
   }
</script>';

This is in the parent iframe:

 <style>
   /* Popup container - can be anything you want */
   .popup {
          position: relative;
          display: inline-block;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
           user-select: none;
           }

   /* The actual popup */
   .popup .popuptext {
                       visibility: hidden;
                       width: 160px;
                       background-color: #555;
                       color: #fff;
                       text-align: center;
                       border-radius: 6px;
                       padding: 8px 0;
                       position: absolute;
                       z-index: 1;
                       bottom: 125%;
                       left: 50%;
                       margin-left: -80px;
                       }

    /* Popup arrow */
    .popup .popuptext::after {
                               content: "";
                               position: absolute;
                               top: 100%;
                               left: 50%;
                               margin-left: -5px;
                               border-width: 5px;
                               border-style: solid;
                               border-color: #555 transparent transparent transparent;
                                   }

     /* Toggle this class - hide and show the popup */
  .popup .show {
   visibility: visible;

    }


    </style>

 // then the span id is dynamically generated.

      <div class="popup"><span class="popuptext" id="myPopupxs43vbty"></span></div>