jQuery打开远程URL的Bootstrap v3模式 [英] Jquery to open Bootstrap v3 modal of remote url

问题描述

我有一个指向内部页面的链接，我需要在Bootstrap模式DIV中打开这些页面.问题在于，当以这种方式加载内容时，似乎无法将最新版本的Bootstrap v3与jQuery v2.1.4结合使用.我已经阅读了很多有关使用Bootstrap创建模态以及如何逐步淘汰远程内容的教程.但是，要想使它与jQuery一起工作还是必须要走的路.

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.

理论上，当您单击时

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

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

the content of data-load-remote is supposed to be read and injected into the div with class 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>

但是，当我尝试使用jQuery v2.1.4和BS v3.3 +的示例时，它会打开带有灰色背景的模态窗口，但模态窗口的所有样式均已消失.这意味着它似乎仅显示模态主体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.

我已经找到了有关如何以这种方式打开远程URL的示例，但是它们都使用了过时的引导程序版本，而不是我正在使用的版本.谁能给我一些启示?

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?

推荐答案

因此，基本上，在jquery中，我们可以使用

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.

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

这篇关于jQuery打开远程URL的Bootstrap v3模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！