單擊鏈接後加載模式

我一直在嘗試加載模式內容後單擊此案例中的「關於產品」。頁面上的Atm是更多文章，每篇文章都有模態。因爲evrey單一模態已經加載，所以模態的alose加載頁面和模式的網頁變慢。單擊鏈接後加載模式

我想打的JavaScript當我點擊「關於產品」的模式將開始加載或者只是：

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

因爲這部分做緩慢的頁面

有代碼的其餘部分：

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

來源

2016-11-17 vatra

所以，只有當用戶點擊關於產品鏈接並顯示'對話框'時，你纔想加載'model'的'iframe'內容？正確嗎？ – Searching

是的，因爲iframe使網頁更慢 – vatra

好的，我們可以綁定a點擊事件並使用它加載iframe src屬性，如果你不想立刻加載..

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：在這裏，我們重視click事件與.about_product類的鏈接。的onclick data-src參考使用，並設置爲IFRAME

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

然而，這是不是與引導js文件一起進行測試，讓我們知道如何去。

更新：我創建了一個jsfiddle以顯示它是如何工作的。

來源

2016-11-18 08:54:45 Searching

感謝您的幫助，但它不會。 iframe在檢查和模式下是空白的 – vatra

@vatra開發控制檯中是否有任何錯誤？所以模式打開，iframe沒有內容？你可以使用devtools檢查iframe和鏈接並共享屏幕截圖。我只想看看屬性是否得到更新。 – Searching

有檢查ss：https：//postimg.org/image/3uovbaysz/ 有代碼：https：//postimg.org/image/kpd9rhn43/ – vatra

單擊鏈接後加載模式

回答

相關問題