如何在 Bootstrap 模式中从锚点的 href 值加载 URL？

Question

我有以下代码：

$('.big-open').on('click', function(e){
  e.preventDefault();
  $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<li>
    <a class="big-open" href="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg">IMAGE TEST
    </a>
</li>
<li>
    <a class="big-open" href="http://www.orimi.com/pdf-test.pdf">PDF TEST
    </a>
 </li>

<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Event</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>

我尝试了几个选项，但似乎无法在模态中以“href”（图像或视频或 pdf 文件）形式打开我拥有的任何内容...

我设法让它只打开图像，但这是一种解决方法，它不能解决我使用其他类型的 href 的问题。

有什么想法吗？过去，我使用的是 lightbox、fancybox 等库，并且一切运行顺利。 bootstrap 可以做同样的事情还是我必须回到过去？

谢谢

Answer 1

试试这个来调用你的模型，这肯定会工作。

<a data-toggle="modal" href="#myModal">Open Modal</a> 

Answer 2

我使用 BS4 和您的代码作为基础创建了这个 sn-p，并对其进行了修改以显示正在传入的源数据。

所以 sn-p 管理器不允许 iframes 带有指向第三方的链接（即：您的链接），所以我只是显示字符串，但至少您可以看到一种将数据传递给模式的方法。

$('#myModal').on('show.bs.modal', function(e) {
  $("div.modal-body p").text($(e.relatedTarget).data("ref"));

})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<li>
  <a class="big-open" data-toggle="modal" href="#myModal" data-ref="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg">IMAGE TEST
    </a>
</li>
<li>
  <a class="big-open" data-toggle="modal" href="#myModal" data-ref="http://www.orimi.com/pdf-test.pdf">PDF TEST
    </a>
</li>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Event</h4>
      </div>
      <div class="modal-body">
        <p src="">Loading...</p>
      </div>
      <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>