在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>