öffnen Sie ein popup außerhalb des iframe-aber die Verknüpfung ist innerhalb des iframe

In eine html-Seite, die ich habe sind ein iFrame.

Im iFrame einen link,

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

ob ich füge den link und popup-html-Code auf übergeordnete Fenster seine Arbeitsmethoden in Ordnung.

aber wenn ich die hinzufügen-link im iframe popup html-Code nicht öffnen.

Meine genaue Anforderung : öffnen Sie das popup über dem iframe.

kann ich verschieben Sie die position des popup-html-Code ( iframe innerhalb oder übergeordnete Seite ) irgendwo, aber nicht ändern können Sie die position der <a href="#" id="modelboxnew">open window</a> seinen sollte im iframe nur

Hier ist mein popup

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

InformationsquelleAutor supersaiyan | 2013-05-10

  1. 3

    Dein iframe ist effektiv eine völlig andere Seite, so dass es wahrscheinlich nicht funktionieren, weil Ihre modalen javascript existiert nicht in der iframe-Seite. , Die being said, auch wenn Sie zog alle Ihre javascript in iframe, Stapellauf der " modal von dort halten würde, gefangen innerhalb des iframe.

    Sondern Sie wollen, dass alle Ihre javascript-und modal-html/css-Sachen in das übergeordnete Fenster und anschließend aus dem iframe-link rufen Sie ein popup-Start-Funktion, die es in das übergeordnete Fenster. So, ohne zu wissen, Ihre genaue code oder was frameworks, die Sie verwenden, die grundlegenden Idee in einfachen Worten, ist Folgendes zu tun (vorausgesetzt, jquery, da Sie tagged die Frage als solche)...

    In Ihrem Hauptfenster:

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

    In Ihrem modal:

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

    Beachten Sie, dass Sie brauchen, um die Kontrolle über sowohl die Haupt-Seite & iframe und Sie müssen gehostet werden, die aus der gleichen Domäne, die für diese nicht blockiert werden, indem der browser-Sicherheit.

    ich kann es nicht ändern, meine js-Datei...gibt es eine andere Möglichkeit ?
    das bit kannst du nicht ändern? das Skript in dem iframe? Ich erkennen nicht das markup der class="modal..., was framework verwenden Sie?

    InformationsquelleAutor Alconja

  2. 0

    Lief ich in das als ich Sie eine post-Stil feed-dialog, wo ich hätte klicken Sie auf das "Herz" und würde es zeigen einen iframe, der die Menschen liebte es. Die popup-dialog zeigen würde, wenn der Benutzer klickt auf ein Bild und es wäre für Sie ein popup mit einem link zu diesem Bild s Profil-Seite, und ein link zur Nachricht. Ich übergeben Sie eine variable, um die übergeordneten iframe zu machen, die links funktionieren.
    Hier ist, wo ich den popup-Beispiel habe ich verwendet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

    meinem äußeren iframe setze ich das popup rechts neben dem iframe die Bilder werden immer gerendert. dann nutze ich java, um es zu lösen. das einzige, was ich zu tun hatte war, ändern Sie den javascript-Teil, dass ich Links in der geliebt-post-iframe an die neue Position des popup-Containers. Der java-Aufruf gerendert wird während der mysql-result loop-phase.

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

    Dies ist in der übergeordneten 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>

    InformationsquelleAutor drtechno

Schreibe einen Kommentar