web-dev-qa-db-ja.com

Javascriptでブートストラップモーダルを隠すには？

私はここでの投稿、Bootstrapサイト、そしてGoogledのように怒っていますが、簡単な答えであると確信できるものを見つけることができません...

このような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>
javascripttwitter-bootstrapmodal-dialog
255
jvillian

モーダルをブラウザウィンドウで開いた状態で、ブラウザのコンソールを使って試してみます。

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

それが機能する（そしてモーダルが閉じる）ならば、あなたはあなたの近くのJavascriptが ではない サーバからブラウザへ正しく送られていることを知っています。

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

ブラウザのコンソール：Firefox用のfirebug、ChromeやSafari用のデバッグコンソールなど.

453
Larry K

ブートストラップを閉じるには modal 次のようにmodalメソッドのオプションとして'hide'を渡すことができます

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

動作を見てください。{フィドルここ

モーダルがユーザから隠されたときにイベントを起動したい場合のように、ブートストラップは modal 機能にフックできるイベントも提供します。あなたはhidden.bs.modal eventあなたを使うことができますモーダルメソッドやイベントについてもっと詳しく知りたい場合はDocumentation

上記の方法でうまくいかない場合は、閉じるボタンにIDを付けて閉じるボタンをクリックしてください。

69
Subodh Ghulaxe

私はBootstrap 3.4を使っています

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

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

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

たぶんそれはエレガントではありませんが、それは動作します

44
gaza

私はその同じエラーで経験していました、そしてこのコード行は本当に私を助けます。

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

ブートストラップでモーダルを隠したり表示したりするのに最適なフォームです。

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
20
Royer Vazquez
$('#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
18
Shivam

私はあなたがこのコードを使うことができる正しい解決策を見つけました

$('.close').click();
16
Osama khodrog

（ブートストラップ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
9
Nathan

私は私が同様の問題であると信じるものに遭遇しました。 $('#myModal').modal('hide');はおそらくその関数を実行しており、行にぶつかっています

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

問題は、モーダルが表示されていても値isShownが未定義になり、値がtrueになることです。ブートストラップコードを以下のように少し修正しました。

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

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

8
Richard Handley

「表示された」コールバックが発生した後に電話をかける方が運が良かった：

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

これにより、hide（）呼び出しが行われる前にモーダルの読み込みが完了したことが保証されます。

7
schoonie23

私たちが発見したのは、サーバーコードの呼び出しと成功のコールバックへの復帰との間にわずかな遅れがあったことです。サーバーへの呼び出しを$("#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が呼び出されると、モーダルが隠されてからサーバー側のコードが呼び出されます。

6
markdotnet

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

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

これがドキュメントです： http://getbootstrap.com/javascript/#modals-methods

これがメソッドです：$（ '＃myModal'）。modal（ 'hide'）

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

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

それで、あなたは次のオープニングのために内容をきれいにして、一種のキャッシングを避けます

4
Christophe Meheut Forik 21

[キャンセル]ボタンの属性としてdata-dismiss="modal"を持っていない限り、$('#modal').modal('hide');とその変種は私にはうまくいきませんでした。 data-dismiss="modal" outrightのリンクをクリックしてもそうではないので、あなたのように、私のニーズはいくつかの追加ロジックに基づいておそらく閉じる/おそらく閉じないことでした。私はdata-dismiss="modal"の隠しボタンを持っていましたが、プログラムでクリックハンドラを呼び出せるようになったので、

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

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

$('#hidden-cancel').click();
3
Tyler
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide');
3
Limitless isa

私にも同じ種類の問題があります。これは私に大いに役立ちました

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

イベントバブリングには注意が必要です。 1行のコードを追加する必要があります

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

私はこれが古い質問であることを認識していますが、私はこれらのどれも実際に私が探していたものではないことがわかりました。表示が終了する前にモーダルを閉じようとしたことが原因のようです。

私の解決策は@ 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'とは対照的に、モーダルが完全に表示されていることを示す 'shows.bs.modal'という名前に注意してください。 ）

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

誰かが余分な研究をいつか省くことを願っています。私はこれを思いつく前に解決策を探すのに少し時間を費やしました。

3
Jason Godson

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

フェードアウトを使って滑らかな効果でモーダルを隠します。

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

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

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

あなたがあなたのモーダルで近いクラスを使っているなら、以下はうまくいくでしょう。あなたのユースケースに応じて、私は一般的に近いクラスを持つ複数のモーダルがある場合は可視のモーダルのみにフィルタリングすることをお勧めします。

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

これは悪い習慣ですが、あなたは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>
0
user5093161

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

$("#MyModal .close").click();
0
Viktor Kisil'ov