提问者:小点点

jQuery打开远程url的Bootstrap v3模式


我有一页指向需要在引导模式DIV中打开的内部页面的链接。问题是,似乎将最新版本的引导v3与jQuery v2结合使用。1.4在以这种方式加载内容时不起作用。我读过很多关于使用引导创建模态以及远程内容是如何被淘汰的教程。但是必须离开jQuery才能让它工作,或者也许不行。

理论是当你点击

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

data load remote的内容应该被读取并注入到具有类模态体的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>

我已经找到了很多关于如何以这种方式打开远程URL的例子,但是它们都使用了过时的引导版本,而不是我正在使用的版本。有人能解释一下吗?


共3个答案

匿名用户

因此,基本上,在jquery中,我们可以使用load函数加载href属性。这样我们就可以在

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

匿名用户

从Bootstrap的文档关于远程选项;

自v3以来,此选项已被弃用。已在v4中删除。我们建议改为使用客户端模板或数据绑定框架,或调用jQuery。把你自己装好。

如果提供了远程URL,则内容将通过jQuery的load方法加载一次并注入。模式内容div。如果您使用的是数据api,也可以使用href属性指定远程源。这方面的示例如下所示:

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

这就是。模态内容div,而不是。模态体。如果要将内容放入。modal body然后您需要使用自定义javascript来实现这一点。

因此,我将以编程方式调用jQuery.load,这意味着您可以根据需要保留解雇和/或其他按钮的功能。

要做到这一点,您可以从打开模式的按钮使用带有URL的数据标记,并使用show。学士学位。将内容加载到中的模式事件。模态体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);
});

匿名用户

从不同的角度看待同一问题,远离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>

把遥控器放进去。php文件是您的基本html源代码。