我已经阅读了这里的帖子,Bootstrap网站,并疯狂地搜索-但找不到我确定是一个简单的答案…
我有一个从link_to助手打开的Bootstrap模式,如下所示:
<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %>
在我的ContactsController.create
操作中,我有创建Contact
然后传递给create.js.erb
的代码。在create.js.erb
中,我有一些错误处理代码(混合了ruby和javascript)。如果一切顺利,我想关闭模式。
这就是我遇到麻烦的地方。当一切顺利时,我似乎不能忽视这种模式。
我尝试过$('#myModal').modal('hide');
,但没有任何效果。我也尝试过$('#myModal').hide();
,它会使模式无效,但不会出现在后台。
有关如何在create.js.erb
中关闭模式和/或取消背景的任何指导
编辑
下面是myModal的标记:
<div class="modal hide" id="myModal" >
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Contact</h3>
<div id="errors_notification">
</div>
</div>
<div class="modal-body">
<%= form_for :contact, url: contacts_path, remote: true do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: "last name" %>
<br>
<%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
<a class="close btn" data-dismiss="modal">Cancel</a>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
发布于 2012-05-07 19:55:49
在浏览器窗口中打开模式后,使用浏览器的控制台尝试
$('#myModal').modal('hide');
如果它正常工作(并且模式关闭),那么您就知道close Javascript没有正确地从服务器发送到浏览器。
如果它不工作,那么你需要进一步调查客户端发生了什么。例如,确保不存在具有相同id的两个元素。例如,它在页面加载后第一次工作,但第二次不工作吗?
浏览器控制台: firefox的firebug,Chrome或Safari的调试控制台等。
发布于 2014-06-30 14:09:20
要关闭bootstrap ,您可以将'hide'作为选项传递给模态方法,如下所示
$('#modal').modal('hide');
请看一看working
bootstrap还提供了可与modal功能挂钩的事件,例如,如果您想在对用户隐藏完模态后触发事件,您可以使用bootstrap event在中阅读有关模态方法和事件的更多信息
如果以上方法都不起作用,给你的close按钮一个id,然后点击close按钮触发。
发布于 2016-09-09 12:08:35
用bootstrap隐藏和显示模式的最好形式
// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
https://stackoverflow.com/questions/10466129
复制相似问题