在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或父页面）的位置，但无法更改<a href="#" id="modelboxnew">open window</a>的位置，它应仅在iframe中

这是我的弹出窗口

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

Answer 1

你的iframe实际上是一个完全不同的页面，所以它可能无法正常工作，因为你的模态javascript在iframe的页面中不存在。 话虽如此，即使你将所有的javascript移动到iframe中，从那里推出模态也会让它陷入iframe。

相反，你想要在父窗口中的所有javascript和modal 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>