リンクをクリックした後にモーダルをロード

Question

私はこの場合「製品について」リンクをクリックした後にモーダルコンテンツを読み込もうとしています。 ページのAtmはより多くの記事であり、すべての記事はモーダルになっています。 したがって、modalのモーダルはページとロードされており、モーダルのmake Webページは遅くなります。これは、evreyの単一モーダルが読み込まれたためです。

私はモデルがロードまたはちょうどを開始します、私がクリックしたときに、「製品について」のjavascriptを作りたい：

：この部分は、コードの残りの部分があり

ページが遅くなりますので

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

を我々はaクリックイベントをバインドし、あなたはすぐにロードしたくない場合は、iframe srcプロパティをロードするために使用することができ

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

html：データ属性data-linkを追加し、後で使用するためにiframeリンクを追加します。わかりやすくするためclassを追加しますが、ご希望の場合はidを使用してください。

<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：ここでは、クラス.about_productとのリンクにclickイベントを添付する。 onclickのdata-src参照は、しかしこれは、ブートストラップのjsファイルと一緒にテストされ、そう私たちはそれが行く方法を知って聞かせていません

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

のiframeを使用して設定されています。

更新：これはどのように動作するかを示すためにjsfiddleを作成しました。