允许关闭模式外

我用bootstrap-modal plugin为我的项目，当点击。但是现在我遇到了一个关于通过点击外部模式关闭我的模式的问题。我试图通过这些选项，如：data-backdrop="true"，但它不工作。任何错误的想法？允许关闭模式外

编辑：

我的模式是在部分（使用Rails）

<div id="editModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <div class="text-center"> 
      <div class="btn-group topbar header-buttons" role="group" aria-label="..."> 
      <%= link_to 'Add', '#addModal', { 'class' => 'btn btn-default', 'data-toggle' => 'modal', 'data-dismiss' => 'modal' } %> 
      <%= link_to 'Edit', '#', class: 'btn btn-default disabled' %> 
      <%= link_to 'Delete', '#deleteModal', { 'class' => 'btn btn-default', 'data-toggle' => 'modal', 'data-dismiss' => 'modal' } %> 
      </div> 
     </div> 
     </div> 
     <div class="modal-body"> 
     <%= form_for (@change_office_address), remote: true, format: :json, html: { class: :contact_form } do |f| %> 
      <div id="error_explanation" style='display:none;' class="bg-danger text-danger alert fade in alert-danger alert-dismissable errors"> 
      <ul> 
       <% if @change_office_address.errors.any? %> 
       <% @change_office_address.errors.full_messages.each do |msg| %> 
        <li><%= msg %></li> 
       <% end %> 
       <% end %> 
      </ul> 
      </div> 
      <%= f.text_field :name, placeholder: 'Name', class: 'form-control' %> 

      <br> 
      <%= f.text_field :email, placeholder: 'e-mail', class: 'form-control' %> <br> 
      <%= f.label :city_id %> 
      <%= f.collection_select :city_id, City.order(:name), :id, :name, 
            { include_blank: true }, { class: 'form-control' } %> 
      <br> 
      <%= f.label :insurer_id %> 
      <%= f.collection_select :insurer_id, Insurer.order(:short_name), :id, :short_name, 
            { include_blank: true }, { class: 'form-control' } %> 
      <br> 
      <%= f.label :office_id %> 
      <%= f.collection_select :office_id, Office.order(:name), :id, :name, 
            { include_blank: true }, { class: 'form-control' } %> 
      <br> 
      <%= f.text_area :edit_office_address, placeholder: 'New address', class: 'form-control', cols: '30', 
          rows: '5' %> <br> 
      <div class="text-center"> 
      <%= f.submit, class: 'btn btn-default' %> 
      </div> 
     <% end %> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div>

我通过调用一个模式：<%= link_to 'Edit', '#editModal', {'data-toggle' => 'modal'} %>

提前感谢！

来源

2016-07-05 Alex Zakruzhetskyi

检查你的日志。 Bootstrap默认应该有这种行为。 – Mfusiki

为什么不直接使用引导模式？ http://getbootstrap.com/javascript/#modals –

我不使用它，因为我有一些模态链接到其他模式的问题 –

我加入这个代码，而现在它的工作：

$("#myModal").click(function(ev){ 
    if(ev.target != this) return; 
    $('#myModal').modal('hide'); 
    });

来源

2016-07-08 10:38:47

背景墙选项真正默认。

检查：http://getbootstrap.com/javascript/#modals-options

确保，如果你是正确的电话jquery.min.js和bootstrap.min.js。

要进行测试，按Esc键，看看模式被关闭。默认情况下，键盘选项也真。

如果背景和键盘不能正常工作，您很可能错误地调用了.js。

切记：致电jquery.js 之前 bootstrap.js。

如果必要的话，在这里评论你的控制台日志。

最后，请记住Bootstrap不支持多种模式。

来源

2016-07-06 13:55:45

键盘正常工作。该问题只在背景 –

请编辑您的文章并添加您的代码 –

允许关闭模式外

回答

相关问题