Jquery打开远程url的Bootstrap v3模式

Posted 2023-05-08

【中文标题】Jquery打开远程url的Bootstrap v3模式

【英文标题】：Jquery to open Bootstrap v3 modal of remote url

【发布时间】：2016-04-02 21:39:51

【问题描述】：

我有一个指向内部页面的链接页面，我需要在 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 的示例，但它们都使用过时的引导程序版本，而不是我正在使用的版本。有人可以解释一下吗？

【问题讨论】：

我发现的示例基本上可以满足我的需求，但这些示例是使用旧版本的 BS/jQ 完成的：http://plnkr.co/edit/HWSgSw 和 http://jsfiddle.net/sherbrow/thlyb/

$('#myModal').on('show.bs.modal', function (e) $(this).find('.modal-body').load('/log/viewslim?id=72'); ); 如果您有要加载的静态网址，则可以正常工作，但如果有人需要从链接中提取网址怎么办？

【参考方案1】：

所以基本上，在 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'));
);

【讨论】：

从 标记中删除所有对 BS 魔术方法属性（data-target、data-toggle 等）的引用是我完成这项工作所需要做的。如果您不需要将远程 URL 加载到模式中，那么魔术属性可以正常工作。谢谢！

【参考方案2】：

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

此选项自 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，这意味着您可以根据需要保留关闭和/或其他按钮的功能。

为此，您可以使用带有打开模式按钮的 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);
);

【讨论】：

对不起，我忘了提到我已经读过好几次它从 v3.3.0 开始贬值了，但我不能让它与 jQuery 一起工作，而且我不是 javascript 大师。我已经尝试了很多东西，但到目前为止我尝试过的似乎没有任何效果。如果可以让 JQ 完成打开模式和注入远程 url 的工作，我不知道如何让这部分工作。

@vanarie 好的，用一些自定义 jQuery 更新了我的答案。

我验证了 .on() 在打开模式时触发，它显示整个模式窗口、css 样式和所有内容，但 .load 从未将远程内容注入 .modal-身体。所以目前，它要么可以工作但看起来像我的图像，要么可以正确加载但从不注入远程。也许它没有在主模态外部 div 中找到 .modal-body ？

好的，这确实按预期方式工作。但是，当我将 url 添加为 Click me 时，我无法将 url 拉入 .每个 l 链接的加载语句。

感谢您的帮助，先生！在您进行最后一次编辑之前，我已经完成了它，但您的目标也是正确的。希望这会帮助其他有同样问题的人。

【参考方案3】：

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

并将你的基本 html 源代码放入 remote.php 文件中。

【参考方案4】：

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

【讨论】：

这不是问题的答案，应该是对另一个答案的评论。

【参考方案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 中遇到了错误，使用此方法后它可以正常工作。

【参考方案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">。