jQuery Jquery打开远程url的Bootstrap v3模式

Jquery to open Bootstrap v3 modal of remote url

提问by vanarie

I have a page of links to internal pages I need to open up in a Bootstrap modal DIV. The problem is that it seems that using the latest version of Bootstrap v3 in conjunction with jQuery v2.1.4 just doesn't work when it comes to loading content this way. There's plenty of tutorials I've read about creating modals with Bootstrap and how remote content is being phased out. But there's got to be away to make this work with jQuery, or maybe not.

我有一个指向内部页面的链接页面，我需要在 Bootstrap 模态 DIV 中打开。问题是，在以这种方式加载内容时，将最新版本的 Bootstrap v3 与 jQuery v2.1.4 结合使用似乎不起作用。我读过很多关于使用 Bootstrap 创建模态以及如何逐步淘汰远程内容的教程。但是必须离开使用 jQuery 来完成这项工作，或者可能不会。

The theory is that when you click

理论是当你点击

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

the content of data-load-remote is supposed to be read and injected into the div with class modal-body.

data-load-remote 的内容应该被读取并注入到带有 class 的 div 中modal-body。

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

However, when I try this example with jQuery v2.1.4 and BS v3.3+, what it does is open up a modal window with grey background but all the styling of the modal window is gone. Meaning it seems to only display the modal-body div, but the modal header, pretty modal frame and bottom buttons in modal-footer div are not displayed at all. The only way to close the box is to click outside the modal box.

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

I've found examples all around about how to open up remote urls this way, but they all use outdated version of bootstrap, not the version I'm working with. Can anyone shed some lights on this please?

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

回答by Kijan Maharjan

So basically, in jquery what we can do is to load href attribute using the load function. This way we can use the url in <a>tag and load that in modal-body.

所以基本上，在 jquery 中我们可以做的是使用load 函数加载 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'));
});

回答by worldofjr

From Bootstrap's docsabout the remoteoption;

来自Bootstrap 的关于该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 loadmethod and injected into the .modal-contentdiv. If you're using the data-api, you may alternatively use the hrefattribute 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>

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

如果提供了远程 URL，内容将通过 jQuery 的load方法加载一次并注入.modal-contentdiv。如果您使用的是 data-api，您也可以使用该href属性来指定远程源。一个例子如下所示：

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

That's the .modal-contentdiv, not .modal-body. If you want to put content inside .modal-bodythen you need to do that with custom javascript.

那是.modal-contentdiv，而不是.modal-body. 如果你想把内容放在里面，.modal-body那么你需要用自定义的 javascript 来做到这一点。

So I would call jQuery.loadprogrammatically, meaning you can keep the functionality of the dismiss and/or other buttons as required.

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

To do this you could use a data tag with the URL from the button that opens the modal, and use the show.bs.modalevent to load content into the .modal-bodydiv.

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

HTML Link/Button

HTML 链接/按钮

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

jQuery

jQuery

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

回答by Kuzma

e.relatedTarget.data('load-url');won't work
use dataset.loadUrl

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

回答by Dan

A different perspective to the same problem away from Javascript and using php:

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

and put in the remote.php file your basic html source.

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

回答by M Kaweepatt Churcharoen

In bootstrap-3.3.7.js you will see the following code.

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

So the bootstrap is going to replace the remote content into <div class="modal-content">element. This is the default behavior by framework. So the problem is in your remote content itself, it should contain <div class="modal-header">, <div class="modal-body">, <div class="modal-footer">by design.

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

回答by Marcin Nabia?ek

If using @worldofjr answer in jQuery you are getting error:

如果在 jQuery 中使用 @worldofjr 答案，则会出现错误：

e.relatedTarget.data is not a function

e.relatedTarget.data 不是函数

you should use:

你应该使用：

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

Not that e.relatedTargetif wrapped by $(..)

不是e.relatedTarget如果被包裹$(..)

I was getting the error in latest Bootstrap 3 and after using this method it's working without any problem.

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