在iframe外部打开弹出窗口，但链接在iframe内部

Question

在html页面中，我包含一个iFrame。

在iFrame中，有一个环节，

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

如果我加入的父窗口的工作正常的链接，弹出的HTML。

但如果我在iframe中添加链接弹出式html不打开。

我的确切需求：打开iframe上方的弹出窗口。

我可以移动弹出HTML（内部iframe或父页面）的位置，任何地方，但不能改变其应在iframe的<a href="#" id="modelboxnew">open window</a>位置只有

这里是我的弹出

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

Answer 1

你iframe实际上是一个完全不同的页面，所以它可能不起作用，因为您的模态JavaScript不存在于iframe的页面中。话虽如此，即使你将所有的JavaScript移动到iframe中，从内部激活模式也会使其陷入iframe中。

相反，您希望所有的JavaScript和模态html/css东西在父窗口中，然后从iframe链接中调用父窗口中存在的弹出式启动函数。所以，不知道你的确切代码或你正在使用，深入浅出的基本思路是做以下（假设jQuery的，因为您标记了一个问题，这样的）构架...

在主窗口：

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

在你的模式：

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

请注意，您需要在这两个主页& iframe的控制，他们需要从同一个域托管这不是由被阻止浏览器的安全性。

Answer 2

我在制作帖子样式提要对话框时遇到了这个问题，我点击“心脏”，它会显示喜欢它的人的iframe。当用户点击一张图片时，弹出对话框会显示，并且会给他们一个弹出窗口，其中包含指向该图片的个人资料页面的链接以及指向消息的链接。我将一个变量传递给父iframe以使链接正常工作。 这里是我得到了我使用的弹出示例：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

在我的外部iframe我把弹出右边的iframe图片得到呈现。那么我使用java来触发它。我必须做的唯一事情是将我在喜爱的帖子iframe中留下的javascript部分更改为弹出容器的新位置。 java调用在mysql结果循环阶段被渲染。

<?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>'; 

这是在父的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>