引导3与远程Modal

我刚刚启动了新的Twitter Bootstrap版本的新项目：bootstrap 3.我无法使Modal在远程模式下工作。 我只是想当我点击一个链接，它显示模式与远程url的内容。 它的作品，但模式布局被完全摧毁。

这里是一个jsfiddle的链接： http : //jsfiddle.net/NUCgp/5/

代码 ：

<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a> <!-- Modal --> <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-hidden="true">&times;</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"><div class="te"></div></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> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> 

任何人都可以使这个简单的例子工作？

Answer 1

关于模式的远程选项，从文档 ：

如果提供远程URL，内容将通过jQuery的加载方法加载并注入到模态元素的根目录中 。

这意味着你的远程文件应该提供完整的模式结构，而不仅仅是你想要在主体上显示的内容。

Bootstrap 3.1更新：

在v3.1中，上述行为被改变，现在远程内容被加载到.modal-content

看到这个演示提琴

Boostrap 3.3更新：

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

Answer 2

对于Bootstrap 3

我必须处理的工作stream是加载可能会改变的URL上下文的内容。 所以默认情况下设置你的模式与JavaScript或HREF默认情况下，你想显示：

 $('#myModal').modal({ show: false, remote: 'some/context' }); 

销毁模式不适用于我，因为我不是从同一个远程加载，因此我不得不：

 $(".some-action-class").on('click', function () { $('#myModal').removeData('bs.modal'); $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') }); $('#myModal').modal('show'); }); 

这当然很容易被重构成一个js库，并为加载模式提供了很大的灵活性

我希望这可以节省15分钟的修补时间。

Answer 3

如果你不想发送完整的模式结构，你可以像这样复制旧的行为：

 // this is just an example, remember to adapt the selectors to your code! $('.modal-link').click(function(e) { var modal = $('#modal'), modalBody = $('#modal .modal-body'); modal .on('show.bs.modal', function () { modalBody.load(e.currentTarget.href) }) .modal(); e.preventDefault(); }); 

Answer 4

这是我的解决scheme（利用上面的几个），利用BS3自己的结构重新设置旧的远程加载行为。 它应该是无缝的。

我将保持代码variables的重要性和描述性，以使事情易于理解。 我也假设JQuery的存在。 Javascript重型起重机types将轻松简化代码。

参考这里是一个链接，调用BS3模式：

 <li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li> 

在你的Javascript，你将需要以下。

 // Make sure the DOM elements are loaded and accounted for $(document).ready(function() { // Match to Bootstraps data-toggle for the modal // and attach an onclick event handler $('a[data-toggle="modal"]').on('click', function(e) { // From the clicked element, get the data-target arrtibute // which BS3 uses to determine the target modal var target_modal = $(e.currentTarget).data('target'); // also get the remote content's URL var remote_content = e.currentTarget.href; // Find the target modal in the DOM var modal = $(target_modal); // Find the modal's <div class="modal-body"> so we can populate it var modalBody = $(target_modal + ' .modal-body'); // Capture BS3's show.bs.modal which is fires // immediately when, you guessed it, the show instance method // for the modal is called modal.on('show.bs.modal', function () { // use your remote content URL to load the modal body modalBody.load(remote_content); }).modal(); // and show the modal // Now return a false (negating the link action) to prevent Bootstrap's JS 3.1.1 // from throwing a 'preventDefault' error due to us overriding the anchor usage. return false; }); }); 

我们只是在那里。 你可能想要做的一件事是用最大高度来设置模态体，这样长的内容就会滚动。

在你的CSS中，你需要以下内容：

 .modal-body{ max-height: 300px; overflow-y: scroll; } 

只是为了参考，我将包括模态的HTML，这是你见过的每一个Bootsrap模态例子的敲门砖：

 <div id="terms" 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> <h3 id="termsLabel" class="modal-title">TERMS AND CONDITIONS</h3> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 5

我做到了这一点：

 $('#myModal').on 'shown.bs.modal', (e) -> $(e.target).find('.modal-body').load('http://yourserver.com/content') 

Answer 6

尽pipe我不喜欢修改Bootstrap代码（使升级更加困难），但是您可以简单地将“.find（'。modal-body'）添加到modal.js中的load语句中，如下所示：

 // original code // if (this.options.remote) this.$element.load(this.options.remote) // modified code if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote) 

Answer 7

这是我使用的方法。 它不需要页面上任何隐藏的DOM元素，只需要一个具有模态部分的href的锚标签和一个“modalTrigger”类。 当模式closures（隐藏）时，它将从DOM中删除。

  (function(){ // Create jQuery body object var $body = $('body'), // Use a tags with 'class="modalTrigger"' as the triggers $modalTriggers = $('a.modalTrigger'), // Trigger event handler openModal = function(evt) { var $trigger = $(this), // Trigger jQuery object modalPath = $trigger.attr('href'), // Modal path is href of trigger $newModal, // Declare modal variable removeModal = function(evt) { // Remove modal handler $newModal.off('hidden.bs.modal'); // Turn off 'hide' event $newModal.remove(); // Remove modal from DOM }, showModal = function(data) { // Ajax complete event handler $body.append(data); // Add to DOM $newModal = $('.modal').last(); // Modal jQuery object $newModal.modal('show'); // Showtime! $newModal.on('hidden.bs.modal',removeModal); // Remove modal from DOM on hide }; $.get(modalPath,showModal); // Ajax request evt.preventDefault(); // Prevent default a tag behavior }; $modalTriggers.on('click',openModal); // Add event handlers }()); 

要使用，只需使用模态部分的href创build一个标签：

 <a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a> 

Answer 8

另一个简单而有效的方法是在你的布局中有一个盲模式，如果需要的话可以调用它。

JS

  var remote_modal = function(url) { // reset modal body with a spinner or empty content spinner = "<div class='text-center'><i class='fa fa-spinner fa-spin fa-5x fa-fw'></i></div>" $("#remote-modal .modal-body").html(spinner) $("#remote-modal .modal-body").load(url); $("#remote-modal").modal("show"); } 

和你的HTML

  <div class='modal fade' id='remote-modal'> <div class='modal-dialog modal-lg'> <div class='modal-content'> <div class='modal-body'></div> <div class='modal-footer'> <button class='btn btn-default'>Close</button> </div> </div> </div> </div> </body> 

现在你可以简单地调用remote_modal('/my/url.html') ，内容显示在模态中

Answer 9

我这样做：

 <!-- global template loaded in all pages // --> <div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="newsLabel"></h3> </div> <div class="modal-body"> <div class="loading"> <span class="caption">Loading...</span> <img src="http://img.dovov.comloading.gif" alt="loading"> </div> </div> <div class="modal-footer caption"> <button class="btn btn-right default modal-close" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

这是我的一个href：

 <a href="#NewsModal" onclick="remote=\'modal_newsfeed.php?USER='.trim($USER).'&FUNCTION='.trim(urlencode($FUNCTIONCODE)).'&PATH_INSTANCE='.$PATH_INSTANCE.'&ALL=ALL\' remote_target=\'#NewsModal .modal-body\'" role="button" data-toggle="modal">See All Notifications <i class="m-icon-swapright m-icon-dark"></i></a>