javascript - 如何使用 Bootstrap 打开模态中的所有链接

Question

我希望能够以模式打开页面上的所有链接。

下面是一个例子:

<a href="http://google.com.au">Google AU</a>
<a href-"http://google.com">Google US</a>
<a href="https://www.google.co.jp>Google JP</a>

我希望这些链接打开 Bootstrap Modal iFrame，加载 href=网站进入模态。我们在主页上有数百个链接(都在我们自己的域内)，点击时会在新选项卡中打开，但我们希望能够以模式打开它们，类似于 MaterializeCSS 的做法:

<div aria-hidden="true" class="modal fade" id="rs1" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog modal-full">
        <div class="modal-content">
            <iframe class="iframe-seamless" src="https://google.com.au" title="Google AU"></iframe>
        </div>
    </div>
</div>

所有模态都没有编码<div id="unique">这些链接不起作用，那么是否可以使用 Javascript 自动使页面上的所有链接都打开到模式中？

谢谢

Answer 1

首先你应该创建一个空的模式，内容将根据点击的链接填充。遵循 Javascript 应该有助于实现这一目标。我没有测试过它，但它应该看起来像这样。

$('a').click(function() { 
   $('#myModal .modal-content').html('<iframe src="' + $(this).attr('href') + '"></iframe>'); 
   $('#myModal').modal('show');
});