引导3 – 如何通过AJAX加载模态内容的内容？

正如你在这里看到的，我有一个启动模式的button。 为这个button设置一个href url，这个url会被Bootstrap 3自动加载到模态中。事实上，这个页面被加载到模态根目录（就像在引导3文档中为模态使用所说的那样）。 我想把它加载到模态体中。

有没有办法通过属性（而不是JavaScript）来做到这一点？ 或者什么是最自动的方式呢？

PS我记得在Bootstrap 2的内容被加载在身体，而不是根。

Answer 1

检查这个答案了。

它看起来像唯一的方法是提供您的ajax响应的整个模态结构。

正如你可以从引导源码检查，加载函数被绑定到根元素。

如果你不能修改ajax响应，一个简单的解决方法可能是显式调用你的body元素上的$(..).modal(..)插件，即使它可能会破坏显示/隐藏function根元素。

Answer 2

这实际上超级简单，只是一点点的JavaScript添加。 链接的href被用作ajax内容源。 请注意，对于Bootstrap 3. *，我们设置data-remote="false"来禁用弃用的Bootstrap加载函数 。

JavaScript的：

 // Fill modal with content from link href $("#myModal").on("show.bs.modal", function(e) { var link = $(e.relatedTarget); $(this).find(".modal-body").load(link.attr("href")); }); 

Html（基于官方的例子 ）：

 <!-- Link trigger modal --> <a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default"> Launch Modal </a> <!-- Default bootstrap modal example --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

尝试一下： https : //jsfiddle.net/ednon5d1/

Answer 3

我想你正在寻找这个自定义函数。 它需要一个数据切换属性，并dynamic创build必要的div来放置远程内容。 只需将数据切换=“ajaxModal”放在您想通过AJAX加载的任何链接上。

JS部分：

 $('[data-toggle="ajaxModal"]').on('click', function(e) { $('#ajaxModal').remove(); e.preventDefault(); var $this = $(this) , $remote = $this.data('remote') || $this.attr('href') , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>'); $('body').append($modal); $modal.modal({backdrop: 'static', keyboard: false}); $modal.load($remote); } ); 

最后，在远程内容中，您需要将整个结构工作。

 <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <a href="#" class="btn btn-white" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-primary">Another button...</a> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> 

Answer 4

使用模态的简单方法是使用eModal ！

来自github的 Ex：

1. 链接到eModal.js <script src="saribe/eModal/master/dist/eModal.min.js"></script>

2. 使用eModal来显示警报，ajax，提示或确认模式

    // Display an alert modal with default title (Attention) eModal.ajax('your/url.html'); 

 $(document).ready(function () {/* activate scroll spy menu */ var iconPrefix = '.glyphicon-'; $(iconPrefix + 'cloud').click(ajaxDemo); $(iconPrefix + 'comment').click(alertDemo); $(iconPrefix + 'ok').click(confirmDemo); $(iconPrefix + 'pencil').click(promptDemo); $(iconPrefix + 'screenshot').click(iframeDemo); ///////////////////* Implementation */////////////////// // Demos function ajaxDemo() { var title = 'Ajax modal'; var params = { buttons: [ { text: 'Close', close: true, style: 'danger' }, { text: 'New content', close: false, style: 'success', click: ajaxDemo } ], size: eModal.size.lg, title: title, url: 'http://maispc.com/app/proxy.php?url=http://loripsum.net/api/' + Math.floor((Math.random() * 7) + 1) + '/short/ul/bq/prude/code/decorete' }; return eModal .ajax(params) .then(function () { alert('Ajax Request complete!!!!', title) }); } function alertDemo() { var title = 'Alert modal'; return eModal .alert('You welcome! Want clean code ?', title) .then(function () { alert('Alert modal is visible.', title); }); } function confirmDemo() { var title = 'Confirm modal callback feedback'; return eModal .confirm('It is simple enough?', 'Confirm modal') .then(function (/* DOM */) { alert('Thank you for your OK pressed!', title); }) .fail(function (/*null*/) { alert('Thank you for your Cancel pressed!', title) }); } function iframeDemo() { var title = 'Insiders'; return eModal .iframe('https://www.youtube.com/embed/VTkvN51OPfI', title) .then(function () { alert('iFrame loaded!!!!', title) }); } function promptDemo() { var title = 'Prompt modal callback feedback'; return eModal .prompt({ size: eModal.size.sm, message: 'What\'s your name?', title: title }) .then(function (input) { alert({ message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' }) }) .fail(function (/**/) { alert('Why don\'t you tell me your name?', title); }); } //#endregion }); 

 .fa{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http:saribe/eModal/master/dist/eModal.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css" rel="stylesheet" > <link href="http//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row" itemprop="about"> <div class="col-sm-1 text-center"></div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Ajax</h3> <p>You must get the message from a remote server? No problem!</p> <i class="glyphicon glyphicon-cloud fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Alert</h3> <p>Traditional alert box. Using only text or a lot of magic!?</p> <i class="glyphicon glyphicon-comment fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Confirm</h3> <p>Get an okay from user, has never been so simple and clean!</p> <i class="glyphicon glyphicon-ok fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>Prompt</h3> <p>Do you have a question for the user? We take care of it...</p> <i class="glyphicon glyphicon-pencil fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-2 text-center"> <div class="row"> <div class="col-sm-10 text-center"> <h3>iFrame</h3> <p>IFrames are hard to deal with it? We don't think so!</p> <i class="glyphicon glyphicon-screenshot fa-5x pointer" title="Try me!"></i> </div> </div> </div> <div class="col-sm-1 text-center"></div> </div>