4

在一个 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>
4

2 回答 2

4

您的 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，并且它们需要托管在同一个域中，以免被浏览器的安全性阻止。

于 2013-05-10T05:41:01.817 回答
0

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

在我的外部 iframe 中，我将弹出窗口放在正在渲染图片的 iframe 旁边。然后我使用java来触发它。我唯一要做的就是将我留在喜爱的 post 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>
于 2018-02-10T11:44:50.280 回答