Question

我有一页指向我需要在Bootstrap模态DIV中打开的内部页面的链接。问题是，似乎使用最新版本的Bootstrap v3和jQuery v2.1.4在以这种方式加载内容时并不起作用。我已经阅读了大量有关使用Bootstrap创建模态以及如何逐步淘汰远程内容的教程。但是，必须离开才能使用jQuery，或者不是。

理论是当你点击

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

应该读取data-load-remote的内容并将其注入到类modal-body的div中。

<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" 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 type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>

然而，当我用jQuery v2.1.4和BS v3.3 +尝试这个例子时，它所做的是打开一个带有灰色背景的模态窗口，但模态窗口的所有样式都消失了。这意味着它似乎只显示模态体div，但模态页眉div中的模态标题，漂亮的模态框架和底部按钮根本不显示。关闭该框的唯一方法是在模态框外单击。

我已经找到了关于如何以这种方式打开远程URL的示例，但它们都使用过时版本的bootstrap，而不是我正在使用的版本。请问有人可以解决这个问题吗？

Answer 1

基本上，在jquery中我们可以做的是使用load function加载href属性。这样我们就可以使用<a>标记中的网址并将其加载到模态体中。

<a  href='/site/login' class='ls-modal'>Login</a>

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

Answer 2

关于remote选项的Bootstrap's docs;

此选项自v3.3.0起已弃用，并已在v4中删除。我们建议使用客户端模板或数据绑定框架，或自行调用jQuery.load。

如果提供了远程URL，则将通过jQuery的load方法一次性加载内容并将其注入.modal-content div。如果您正在使用data-api，则可以使用href属性指定远程源。这方面的一个例子如下所示：
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

那是.modal-content div，而不是.modal-body。如果您想将内容放在.modal-body内，那么您需要使用自定义javascript。

所以我会以编程方式调用jQuery.load，这意味着你可以根据需要保留dismiss和/或其他按钮的功能。

要执行此操作，您可以使用带有打开模式的按钮的URL的数据标记，并使用show.bs.modal事件将内容加载到.modal-body div中。

HTML链接/按钮

<a href="#" data-toggle="modal" data-load-url="remote.html" data-target="#myModal">Click me</a>

的jQuery

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});

Answer 3

e.relatedTarget.data('load-url');无效使用 dataset.loadUrl

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = e.relatedTarget.dataset.loadUrl;
    $(this).find('.modal-body').load(loadurl);
});

Answer 4

远离Javascript和使用php的相同问题的不同视角：

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

<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
    <div class="modal-dialog" style="text-align: left;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <?php include( 'remotefile.php'); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

并在remote.php文件中输入您的基本html源代码。

Answer 5

如果在jQuery中使用@worldofjr回答，则会收到错误：

e.relatedTarget.data不是函数

你应该使用：

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});

如果由e.relatedTarget

包裹，则不是$(..)

我在最新的Bootstrap 3中收到错误，使用此方法后，它没有任何问题。

Answer 6

在bootstrap-3.3.7.js中，您将看到以下代码。

if (this.options.remote) {
  this.$element
    .find('.modal-content')
    .load(this.options.remote, $.proxy(function () {
      this.$element.trigger('loaded.bs.modal')
    }, this))
}

因此引导程序将把远程内容替换为<div class="modal-content">元素。这是框架的默认行为。因此问题出在您的远程内容本身上，它应按设计包含<div class="modal-header">，<div class="modal-body">，<div class="modal-footer">。

Jquery打开远程URL

6 个答案: