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 위에 팝업을 엽니 다.

난 아무데도 (iframe이 또는 상위 페이지 내) 팝업 HTML의 위치를 ​​이동할 수 있지만 여기에

내 팝업

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

Answer 1

자사가 iframe에해야 <a href="#" id="modelboxnew">open window</a>의 위치를 ​​변경하지 못할 귀하 iframe은 실제로 완전히 다른 페이지이므로 모달 자바 스크립트가 iframe 페이지에 없기 때문에 아마 작동하지 않을 것입니다. 즉, iframe 내부에서 모든 자바 스크립트를 이동하더라도 거기에서 모달을 시작하면 iframe 내에 트랩 된 상태로 유지됩니다.

대신 부모 창에 모든 javascript 및 모달 html/css 항목을 넣고 iframe 링크에서 상위 창에있는 팝업 시작 함수를 호출해야합니다. 따라서 정확한 코드 또는 사용중인 프레임 워크를 모르는 상태에서 간단한 개념으로 기본 아이디어는 다음과 같이 수행하는 것입니다 (질문에 태그를 추가 한 이후 jquery라고 가정).

기본 창에서 :

메인 페이지 & iframe을 모두 제어 할 필요가 그들이에 의해 차단되지이 동일한 도메인에서 호스팅 할 필요가

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

참고 : 모달에서

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

브라우저 보안.

Answer 2

나는 "마음"을 클릭하고 그것을 사랑하는 사람들의 iframe을 보여줄 게시 스타일 피드 대화 상자를 만들 때이 문제를 겪었습니다. 팝업 대화 상자는 사용자가 그림을 클릭하면 해당 그림의 프로필 페이지로 연결되는 링크와 메시지 링크를 제공합니다. 링크를 작동 시키려면 상위 iframe에 변수를 전달합니다. 다음은 내가 사용한 팝업 예제입니다. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

내 외부 iframe 내 사진이 렌더링되는 iframe 바로 옆에 팝업을 둡니다. 그럼 내가 그것을 사용하여 자바를 사용합니다. 내가해야만 한 일은 사랑하는 포스트 iframe에서 팝업 컨테이너의 새 위치에 남긴 자바 스크립트 부분을 변경하는 것이 었습니다. 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>