Load Modal nach Klick Link

Question

Ich habe versucht, einen modalen Inhalt nach dem Klicken auf Link in diesem Fall "Über das Produkt" zu laden. Atm auf der Seite ist mehr Artikel und jeder Artikel wurde modal. So modal's Alose wurde mit Seite laden und Modals machen die Webseite langsamer, weil jedes einzelne modale geladen wurde.

Ich mag Javascript machen, wenn ich auf „Über-Produkt“ wird das Modell starten oder einfach nur laden:

<iframe width="100%" height="540px" src="'.$row['video_url'].'" frameborder="0" allowfullscreen></iframe> 

Da dieser Teil Seite macht langsam

Es gibt Rest Code:

<div class="item-col col-xs-12 col-sm-4 col-md-3"> 
    <div class="product-wrapper"> 
     <div class="list-col4"> 
      <img src="../images/'.$row['productimage'].'" alt="'.$row['productname'].'"> 
     </div> 
     <div class="list-col8" style="padding-bottom: 15px;"> 
      <div class="gridview"> 
       <div class="padding-games"> 
        <span class="special-price"><span><center>'.$row['productname'].'</center></span></span> 
       </div> 
      </div> 
      <a data-toggle="modal" data-target="#'.$row['id'].'">About Product</a> 
      <a href="product-'.$row['title'].'">More</a> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 
<!-- product end --> 

<!-- Modal --> 
<div id="'.$row['id'].'" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <center><h4 class="modal-title"><img src="../images/'.$row['productimage'].'" alt="'.$row['productname'].'"></h4></center> 
      </div> 
      <div class="modal-body"> 
       <iframe width="100%" height="540px" src="'.$row['video_url'].'" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

OK wir können die a Click-Ereignis binden und es verwenden, die iframe src Eigenschaft zu laden, wenn Sie nicht sofort geladen werden soll ..

html: Wir fügen eine Datenattribut data-link und fügen Sie hier iframe Link später zu verwenden. Wir fügen auch hinzu class zu identifizieren, aber Sie können id verwenden, wenn Sie bevorzugen.

<a class="about_product" data-toggle="modal" data-link="'.$row['video_url'].'" data-target="#'.$row['id'].'">About Product</a> 

iframe

<iframe id="myFrame" width="100%" height="540px" frameborder="0" allowfullscreen></iframe> 

script: Hier legen wir click Ereignis Link mit Klasse .about_product. Onclick data-src Referenz verwendet wird und auf den iframe

$(document).ready(function() { 
    $(".about_product").click(function (e) { 
     e.preventDefault(); 
     $("#myFrame").attr('src', this.dataset.link);  
    }) 
}); 

Dies ist jedoch nicht in Verbindung mit Bootstrap js Dateien getestet, so lassen Sie uns wissen, wie es geht.

Update: habe ich eine jsfiddle zu zeigen, wie das funktioniert. So