twitter-bootstrap-3 - 单击外部时允许关闭模态

Question

我用了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'} %>

提前致谢!

Answer 1

我添加了这段代码，现在可以正常工作了:

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