JavaScriptでBootstrapモーダルを隠す方法は？

私はここの投稿、Bootstrapサイト、そして狂ったようにグーグルを読んだ-しかし、簡単な答えであると確信しているものが見つからない...

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

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

私のContactsController.createアクションでは、作成してContactに渡すコードがありますcreate.js.erb。ではcreate.js.erb、いくつかのエラー処理コード（rubyとjavascriptの混合）があります。すべてがうまくいけば、モーダルを閉じたい。

ここで問題が発生します。すべてがうまくいくと、モーダルを却下できないようです。

私が試しましたが$('#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>

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

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

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

それが機能しない場合は、クライアントで何が起こっているのかをさらに調査する必要があります。たとえば、同じIDを持つ要素が2つないことを確認してください。たとえば、ページの読み込み後、最初は機能しますが、2回目は機能しませんか？

ブラウザのコンソール：firefoxのfirebug、ChromeまたはSafariのデバッグコンソールなど。

ブートストラップモーダルを閉じるには、次のようにオプションとして「hide」をモーダルメソッドに渡します。

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

こちらで作業フィドルをご覧ください

ブートストラップは、モーダル機能にフックできるイベントも提供します。たとえば、モーダルがユーザーから非表示にされたときにイベントを発生させたい場合は、hidden.bs.modalイベントを使用できます。モーダルメソッドとイベントの詳細については、こちらをご覧ください。ドキュメンテーション

上記のいずれの方法でも機能しない場合は、閉じるボタンにIDを指定し、閉じるボタンのクリックをトリガーします。

私はBootstrap 3.4を使用していますが、これは機能しません

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

必死で、私はこれをしました：

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

エレガントではないかもしれませんが、動作します

ブートストラップ付きのモーダルを非表示および表示するための最良のフォーム

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

同じエラーが発生していましたが、このコード行は本当に役に立ちます。

$("[data-dismiss=modal]").trigger({ type: "click" });

$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

このコードを使用できる正しい解決策を見つけました

$('.close').click(); 

私は同様の問題であると私が思うことに遭遇しました。$('#myModal').modal('hide');おそらくその機能を走るとラインをヒットさ

if (!this.isShown || e.isDefaultPrevented()) return

問題は、モーダルが表示されていて値がtrueであっても、値isShownが未定義である可能性があることです。ブートストラップコードを次のように少し変更しました

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

これで問題の大部分は解決したようです。背景がまだ残っている場合は、常に呼び出しを追加して、hide呼び出しの後に手動で削除することができます$('.modal-backdrop').remove();。まったく理想的ではありませんが、機能します。

モーダル使用を非表示にするには、（ブートストラップ3を参照）$('#modal').modal('hide')。しかし、（私にとって）背景がぶらついたのは、「hide」が終了する前にモーダルのDOMを破壊していたからです。

これを解決するために、非表示のイベントとDOMの削除を連鎖させました。私の場合：this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding

「表示された」コールバックが発生した後、私は幸運にも電話をかけることができました：

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

これにより、hide（）呼び出しが行われる前にモーダルが確実にロードされます。

私たちが見つけたのは、サーバーコードの呼び出しと成功のコールバックへの復帰の間にわずかな遅延があったことです。サーバーへの呼び出しを$("#myModal").on('hidden.bs.modal', function (e)ハンドラーでラップしてから$("#myModal").modal("hide");メソッドを呼び出した場合、ブラウザーはモーダルを非表示にしてからサーバー側のコードを呼び出します。

繰り返しますが、エレガントではありませんが機能的です。

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

ご覧のとおり、myFuncが呼び出されると、モーダルが非表示になり、サーバー側のコードが呼び出されます。

私は同じ問題を経験しており、少し実験した後、解決策を見つけました。私のクリックハンドラーでは、次のようにイベントが発生しないようにする必要があります。

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

ここにドキュメントがあります：http : //getbootstrap.com/javascript/#modals-methods

ここにメソッドがあります：$（ '＃myModal'）。modal（ 'hide'）

異なるコンテンツでモーダルを数回開く必要がある場合は、（メインのjsに）追加することをお勧めします：

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

したがって、次のオープニングのためにコンテンツをクリーンアップし、一種のキャッシュを回避します

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

私も同じような問題を抱えています。これはとても役に立ちました

$("[data-dismiss=modal]").trigger({ type: "click" });

私はこの単純なコードを使用しました：

$("#MyModal .close").click();

$('#modal').modal('hide');そして、そのバリエーションはdata-dismiss="modal"、[キャンセル]ボタンの属性として使用しない限り機能しませんでした。あなたと同じように、私のニーズはいくつかの追加のロジックに基づいて閉じる可能性がある/閉じない可能性があるため、data-dismiss="modal"完全にリンクをクリックしても機能しません。data-dismiss="modal"プログラムでクリックハンドラーをプログラムから呼び出すことができる非表示のボタンができたので、

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

そして、あなたが持つことができるモーダルを閉じる必要があるときにキャンセルするためのクリックハンドラ内

$('#hidden-cancel').click();

イベントのバブリングを処理する必要があります。コードを1行追加する必要がある

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

これは古い質問だと思いますが、実際に探していたものはどれもありませんでした。表示が完了する前にモーダルを閉じようとしたことが原因と思われます。

私の解決策は@ schoonie23の回答に基づいていましたが、いくつか変更する必要がありました。

まず、スクリプトの先頭でグローバル変数を宣言しました。

<script>
    var closeModal = false;
    ...Other Code...

次に、私のモーダルコードで：

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

次に、（showイベントが呼び出されたときにトリガーされる「show」ではなく、モーダルが完全に表示されたことを示す「shown.bs.modal」という名前に注意してください。 ）

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

これにより、誰かがいつか余分な研究を保存できることを願っています。これを思いつく前に、解決策を探すのに少し費やしました。

私はこのコードを使用しました-

フェードアウトを使用して滑らかな効果を持つモーダルを非表示にします。

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

モーダルでcloseクラスを使用している場合、以下が機能します。ユースケースにもよりますが、近いクラスのモーダルが複数ある場合は、表示されるモーダルのみにフィルタリングすることをお勧めします。

$('.close:visible').click();

document.getElementById（ 'closeButton'）。click（）; // data-dismiss = "modal"属性をモーダルの要素に追加し、このIDを付与します

これは悪い習慣ですが、JavaScriptで閉じるボタンを呼び出すことにより、この手法を使用してモーダルを閉じることができます。これは3秒後にモーダルを閉じます。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

これはHTMLだけで実行できます。

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>