JavaScript で Bootstrap モーダルを非表示にするにはどうすればいいですか? 質問する

JavaScript で Bootstrap モーダルを非表示にするにはどうすればいいですか? 質問する

ここの投稿や Bootstrap サイトを読み、必死に Google 検索しましたが、簡単な答えが見つからないのです...

次のように link_to ヘルパーから開く Bootstrap モーダルがあります。

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

私のアクションには、 を作成してに渡すContactsController.createコードがあります。 には、エラー処理コード (Ruby と JavaScript の混合) があります。 すべてがうまくいけば、モーダルを閉じます。Contactcreate.js.erbcreate.js.erb

ここが問題です。すべてがうまくいっているときにモーダルを閉じることができないようです。

試してみましたが、効果はありませんでした。また、モーダルは閉じますが背景は残るようにする方法も$('#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>

ベストアンサー1

ブラウザウィンドウでモーダルを開いた状態で、ブラウザのコンソールを使用して試してください。

$('#myModal').modal('hide');

それが機能し(モーダルが閉じる)、閉じる Javascript がサーバーからブラウザに正しく送信されていないことがわかります。

動作しない場合は、クライアントで何が起こっているかをさらに調査する必要があります。たとえば、同じ ID を持つ要素が 2 つないでないことを確認します。たとえば、ページをロードした後、最初は動作しますが、2 回目は動作しませんか?

ブラウザのコンソール: Firefox の場合は firebug、Chrome や Safari の場合はデバッグ コンソールなど。

おすすめ記事