如何使用 Bootstrap 以模式打开所有链接答案

【问题标题】：How to open all links in modal using Bootstrap如何使用 Bootstrap 以模式打开所有链接
【发布时间】：2016-10-19 12:45:17
【问题描述】：

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

下面是一个例子：

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

我希望这些链接打开一个引导模式 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自动使页面上的所有链接都打开到模态中？

谢谢

【问题讨论】：

这篇文章可能会有所帮助stackoverflow.com/questions/18378720/…
似乎从 v3.3 开始已弃用。我也尝试过使用 jQuery 负载，但运气不佳。这似乎也很有希望stackoverflow.com/a/34513876/422687@KiranShakya

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

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

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

【讨论】：