Bootstrap 引导模式中的Lazyload iframe

pdkcd3nj  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(204)

点击Modal按钮时加载图像的演示如下:http://www.bootply.com/7kS6Ube98u
我需要放置iframe而不是图像,但不知道要更改什么代码,所以它以相同的方式加载(即,当单击Open Modal按钮时)
任何帮助都是感激不尽的。

hmtdttj4

hmtdttj41#

您可以简单地将html更改为使用iframe(没有src属性),然后将js中的引用更改为iframe以使其更清晰。

piah890a

piah890a2#

下面是一个将vanilla JS与Bootstrap 5一起使用的示例:
JS:

var modal = document.getElementById('modalId')
modal.addEventListener('show.bs.modal', function (event) {
    var iframe = modal.querySelector('iframe');
    iframe.src = iframe.getAttribute('data-src');
})

于飞:

<div class="modal modal-blur fade" id="modalId" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Heading
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <iframe data-src="http://www.stackoverflow.com" class="w-100"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

相关问题