外をクリックするとモーダルを閉じることができます

Question

私のプロジェクトにbootstrap-modal pluginを使用しました。しかし、今私はモーダルを外でクリックして閉じることに問題があります。私はdata-backdrop="true"のようなオプションを渡そうとしましたが、動作しません。何がうまくいかないのか？

EDITED：おかげで先に<%= link_to 'Edit', '#editModal', {'data-toggle' => 'modal'} %>

：私のモーダルは、（レールを使用して）部分

<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> 

である

私はモーダルを呼びます！

Answer 1

私はこのコードを追加し、今では働いています：

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

Answer 2

バックドロップオプションは、デフォルトではです。

チェック：http://getbootstrap.com/javascript/#modals-options

あなたが正しくコールjquery.min.jsとbootstrap.min.jsしているか確認します。

テストするには、Escキーを押して、モーダルが閉じているかどうかを確認します。既定では、キーボードオプションはtrueです。

背景とキーボードが機能しない場合は、誤って.jsという名前を付けた可能性があります。

を覚えておいてください。jquery.js BEFORE bootstrap.jsを呼び出してください。

必要に応じて、ここにコンソールログをコメントしてください。

最後に、ブートストラップは複数のモーダルをサポートしていないことに注意してください。