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等的库，它们都运行得很顺利。引导程序可以做同样的事情，还是我必须回到过去？

谢谢

Answer 1

尝试此调用您的模型肯定可以。

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

Answer 2

我以BS4和您的代码为基础创建了此代码段，并对其进行了修改以显示正在传入的源数据。

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

$('#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>

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

2 个答案: