Question

在本例“关于产品”中单击链接后，我一直在尝试加载模态内容。页面上的Atm是更多文章，每篇文章都有模态。所以模态的加载与页面和模态的使网页变慢，因为evrey单模态已加载。

我想在点击“关于产品”时制作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>

Answer 1

好的，我们可以绑定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);       
    })
});

然而，这并没有与bootstrap js文件一起测试，所以让我们知道它是怎么回事。

更新：我创建了jsfiddle以显示其工作原理。

点击链接后加载模态

1 个答案: