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=网站加载到模态中。我们在主页上有所有链接（都在我们自己的域中）当前在单击时在新选项卡中打开，但我们希望能够将它们打开成模态，类似于MaterialiseCSS的工作方式：

<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');
});

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

1 个答案: