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

默认情况下，背景选项 true 。

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

确保您正确调用jquery.min.js和bootstrap.min.js。

要进行测试，请按Esc键，查看模态是否已关闭。默认情况下，键盘选项也是 true 。

如果背景和键盘不起作用，很有可能你错误地调用了.js。

请记住：调用jquery.js 之前 bootstrap.js。

如有必要，请在此处注释您的控制台日志。

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

Answer 2

我添加了此代码，现在它正在运行：

var reg = new RegExp('^[0-9]*$');
var myNumber = "006";
var myText = "1. This is not a number";
reg.test(myNumber) //true
reg.test(myText) //false

单击外部时允许关闭模态

2 个答案: