Jquery 打开远程 Bootstrap v3 模式 url

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 的内容应该用 class 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+ 尝试这个示例时，它所做的是打开一个带有灰色背景但所有样式的模式 window模态 window 不见了。这意味着它似乎只显示 modal-body div，但 modal-footer div 中的模态 header、漂亮的模态框和底部按钮根本不显示。关闭框的唯一方法是在模态框外单击。

我在周围找到了有关如何以这种方式打开远程 URL 的示例，但它们都使用 bootstrap 的过时版本，而不是我正在使用的版本。任何人都可以对此有所了解吗？

Answer 1

来自 Bootstrap's docs 关于 remote 选项；

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

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

所以我会以编程方式调用 jQuery.load，这意味着您可以根据需要保留关闭 and/or 其他按钮的功能。

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

HTML Link/Button

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

所以基本上，在 jquery 中，我们可以做的是使用 load function 加载 href 属性。这样我们就可以在 <a> 标签中使用 url 并将其加载到 modal-body 中。

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

如果在 jQuery 中使用@worldofjr 答案，您将收到错误消息：

e.relatedTarget.data is not a function

你应该使用：

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

从 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 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))
}

因此 bootstrap 会将远程内容替换为 <div class="modal-content"> 元素。这是框架的默认行为。所以问题出在您的远程内容本身，它应该包含 <div class="modal-header">、<div class="modal-body">、<div class="modal-footer"> 设计。

Jquery 打开远程 Bootstrap v3 模式 url

Jquery to open Bootstrap v3 modal of remote url

jquery

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3