重新加载模式内容(twitter bootstrap)

我正在使用twitter bootstrap的模式popup窗口。

<div id="myModal" class="modal hide fade in"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Header</h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="Save"/> </div> </div> 

我可以用这个a元素使用ajax加载内容:

 <a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a> 

现在我必须打开相同的模式,但使用不同的url。 我正在使用这种模式来编辑我的数据库中的一个实体。 所以当我点击一个实体上的编辑,我需要加载一个ID的模式。

 <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a> <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a> <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a> 

如果我点击链接号码1,它工作正常。 但是,如果我然后点击链接号码2,模式内容已经被加载,因此它将显示链接号码1的内容。

如何刷新或重置ajax加载的内容在twitter引导模式popup?

我有同样的问题,我想这样做的方式是删除数据切换属性,并有一个链接的自定义处理程序。

一些在以下方面的内容:

 $("a[data-target=#myModal]").click(function(ev) { ev.preventDefault(); var target = $(this).attr("href"); // load the url and show modal on success $("#myModal .modal-body").load(target, function() { $("#myModal").modal("show"); }); }); 

稍后再尝试并发表评论。

要在模式closures时卸载数据,可以在Bootstrap 2.x中使用这个数据:

 $('#myModal').on('hidden', function() { $(this).removeData('modal'); }); 

并在Bootstrap 3中( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ):

 $(document.body).on('hidden.bs.modal', function () { $('#myModal').removeData('bs.modal') }); //Edit SL: more universal $(document).on('hidden.bs.modal', function (e) { $(e.target).removeData('bs.modal'); }); 

您可以强制Modal通过在Modal插件的hide方法的末尾添加此行来刷新popup窗口(如果使用的是bootstrap-transition.js v2.1.1,则应该在第836行)

 this.$element.removeData() 

或者与一个事件监听器

 $('#modal').on('hidden', function() { $(this).data('modal').$element.removeData(); }) 

使用Bootstrap 3,您可以使用'hidden.bs.modal'事件处理程序来删除任何模式相关的数据,强制popup窗口下次重新加载:

 $('#modal').on('hidden.bs.modal', function() { $(this).removeData('bs.modal'); }); 

基于其他答案(谢谢大家)。

我需要调整代码的工作,只需调用.html擦除整个内容,模式不会加载任何内容后,我做到了。 所以我只是寻找模式的内容区域,并在那里应用HTML的重置。

  $(document).on('hidden.bs.modal', function (e) { var target = $(e.target); target.removeData('bs.modal') .find(".modal-content").html(''); }); 

仍然可以去接受的答案,因为我正在控制与Bootstrap模式加载之前,我得到一些丑陋的跳跃。

比上面公认的例子压缩了一点。 从当前数据目标中抓取目标点击data-toggle = modal on的任何东西。 这使得你不必知道目标模式的id是什么,只需重复使用同一个! less代码=赢! 你也可以修改这个来为你的模态加载标题,标签和button。

  $("[data-toggle=modal]").click(function(ev) { ev.preventDefault(); // load the url and show modal on success $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { $($(this).attr('data-target')).modal("show"); }); }); 

示例链接:

 <a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a> <a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a> <a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a> 

它将适用于所有版本的twitterbootstrap

Javascript代码:

 <script type="text/javascript"> /* <![CDATA[ */ (function(){ var bsModal = null; $("[data-toggle=modal]").click(function(e) { e.preventDefault(); var trgId = $(this).attr('data-target'); if ( bsModal == null ) bsModal = $(trgId).modal; $.fn.bsModal = bsModal; $(trgId + " .modal-body").load($(this).attr("href")); $(trgId).bsModal('show'); }); })(); /* <![CDATA[ */ </script> 

链接到模态是

 <a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a> <a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a> <a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a> 

popup模态

 <div id="myModal" class="modal hide fade in"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Header</h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="Save"/> </div> 

我对Softlion的答案做了一个小小的改动,所以我所有的模态都不会刷新。 具有data-refresh ='true'属性的模式只能刷新,其他模式照常工作。 这是修改后的版本。

 $(document).on('hidden.bs.modal', function (e) { if ($(e.target).attr('data-refresh') == 'true') { // Remove modal data $(e.target).removeData('bs.modal'); // Empty the HTML of modal $(e.target).html(''); } }); 

现在使用如下所示的属性,

 <div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div> 

这将确保只有data-refresh ='true'的模态被刷新。 而且我也重置模态的HTML,因为旧的值显示,直到新的加载,使空的修复,一个。

这是一个咖啡的脚本版本,为我工作。

 $(document).on 'hidden.bs.modal', (e) -> target = $(e.target) target.removeData('bs.modal').find(".modal-content").html('') 

我也被困在这个问题上,然后我看到模态的ID是一样的。 如果你想要多个模态,你需要不同的模态ID 。 我使用dynamicID 。 这是我在haml代码:

 .modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"} 

你可以这样做

 <div id="<%= some.id %>" class="modal hide fade in"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Header</h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="Save" /> </div> </div> 

和你的链接到模态将是

 <a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a> <a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a> <a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a> 

我希望这会对你有用。

我想在模式closures的时候删除AJAX加载的内容,所以我调整了别人build议的行(coffeescript语法):

 $('#my-modal').on 'hidden.bs.modal', (event) -> $(this).removeData('bs.modal').children().remove()