ブートストラップモーダルを閉じる


432

ブートストラップモーダルダイアログボックスを最初に表示したいのですが、ユーザーがページをクリックすると表示されなくなります。私は以下を持っています:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

モーダルは最初に表示されますが、モーダルの外側をクリックしても閉じません。また、コンテンツ領域は灰色表示されません。モーダルを最初に表示し、ユーザーが領域の外側をクリックした後に閉じるにはどうすればよいですか?そして、デモのように背景をグレーアウトするにはどうすればよいですか?


$("#yourModal").modal()またはでモーダルを初期化していますか$('.modal').modal()
merv

上記のコンテキストを追加しました。@mervのアイデアをありがとう!
Nick B

うん...それは問題を示した。@Tamilはあなたのソリューションを持っています。
merv 2013年

回答:


706

modal('toggle')代わりに置くmodal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

5
「トグル」をまったく含めることは不必要です。モーダルdivに 'hide'クラスがないことを確認してください。しかし、はい、タイプミスが問題の原因でした。so +1
merv 2013年

22
いいえ、意図したとおりに機能せず、モーダル要素は非表示になりますが、背景オーバーレイ要素はまだ存在します。@ Subodthソリューションを使用する必要があります。
Parik Tiwari

1
@Pierre-コメントを削除することを検討してください。.modal()。hide()は.modal( 'hide')と同じではないため、ユーザーを混乱させることになります。
マイケルピーターソン

2
Parik

これは正しい答えではありません。以下の答えを確認してください!
user1467439

412

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

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

こちらフィドルの動作をご覧ください

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

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


4
$( '#modal')。modal( 'toggle'); モーダルシャドウを非表示にする方が良い
hamzeh.hanandeh

5
@ hamzeh.hanandeh toggleはオーバーレイを保持し、解決策ではありません。常にshowまたはを使用する必要がありますhide
ryanpcmcquen 2017年

81
$('#modal').modal('toggle'); 

または

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

うまくいくはずです。

しかし、他に何も機能しない場合は、モーダルの閉じるボタンを直接呼び出すことができます。

$("#modal .close").click()

10
hide()を持つものはモーダルを閉じますが、背景はぼやけたままです。$( "#modal .close")。click()はそれを完全に行います。ありがとうございました!
Shilpa、

4
これはすでに明確に文書化されています。ここではクリックを偽造する必要はありません。正解は次のとおりです:$( '#modal')。modal( 'hide');
マイケルピーターソン

this-> $( '#modal')。modal()。hide();
TARA

私は閉じないモデルを持っていますが、$('#modal').modal('hide')それを使用して閉じることができますが、閉じると$('#modal').modal('toggle')垂直スクロールバーが表示されます。だから私にとって$('#modal').hide()は完璧に働きましたが、それが何か問題を引き起こすかどうか知りたいですか?そして、私は内部でコーディングしている$('#modal .close').click()ので、モーダルを閉じるためにそれを使用することはできないと思います。
アーティシャム

34

これは私のために働きました:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

このリンクモーダルを使用



18

これを試して

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

3
これは質問に対する答えを提供すると思います。
jkdev

1
同意する。この答えは質問に対してより正確です。
mikeyq6

1
これは、最も賛成されている回答よりも良い回答です。
MarceloAgimóvel19年

@MarceloAgimóvel:-)
Love Kumar

10

これはかなり良いですし、角度2でも動作します

$("#modal .close").click()

代わりに機能$('#modal').modal('toggle');しますが、効果はありません。
Todor Todorov 2017

8

これに関する私の5セントは、ブートストラップモーダルをIDでターゲットにしたくないので、一度に1つのモーダルしか存在しないようにする必要があるので、トグルは危険なので、モーダルを削除するには次のように十分です。 :

$('.modal').removeClass('show');

2
意図は良好ですが、このアプローチが常に機能するとは限りません。などの他のページ要素には、<body>元に戻す必要があるクラスが追加されています。最良の答えは、'hide'メソッドを使用することです。
JustinStolle 2015

7

状況によっては、タイプミスが原因である可能性があります。たとえば、次のことを確認してください。

data-dismiss="modal"

ではなく

data-dissmiss="modal"

2番目の例の「ss」が2つあることに注意してください。これにより、閉じるボタンが機能しなくなります。


6

次の方法でモーダルポップアップを閉じることができます。

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

6

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

1つのページで複数のモーダルポップを使用している場合は、上記のコードを使用してモーダルの背景を非表示にします。


それとも$('.modal').modal('hide');やります。
Matt Roy

6

<!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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</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">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>


エラー:「メッセージ」:「捕捉されなかったTypeError:$(...)。modalは関数ではありません」
Ivan Burlutskiy

はい。Chrome(Linux Mint)で「コードスニペットを実行」するとエラーが発生します。しかし、Firefoxでは機能します。
Ivan Burlutskiy 2017

1
@Ivan Burlutskiy、私に知らせてくれてありがとう、これらはjquery includeの問題なので、修正しました。今では、すべてのブラウザで正常に動作します。
Ganesh Putta 2017

5
   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

こんにちは-お返事ありがとうございます。私はこれをコードとしてフォーマットしました(これはかなり単純でした-最初の行をもう少しインデントするだけです)。ただし、$('#DeleteModal').modal('hide');ここでのみ関連があると思いますか?
Rupの


3

modal.hideを使用すると、モーダルのみが非表示になります。モーダルの下でオーバーレイを使用している場合、それはまだそこにあります。クリック呼び出しを使用して実際にモーダルを閉じ、オーバーレイを削除します。

$("#modalID .close").click()

3

これを行う別の方法は、まずモーダルを閉じるmodal-openクラスを削除することです。次に、モーダルの灰色がかったカバーを削除するクラスmodal-backdropを削除します。

次のコードを使用できます。

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

回答としてコードを単にダンプするのを避け、それが何をするのか、なぜ説明するのかを試してください。あなたのコードは、関連するコーディングの経験がない人には明らかではないかもしれません。回答を編集して、明確化、コンテキスト
フリット

わかりました。基本的に、これはmodal-openクラスを削除し、モーダルを閉じます。次に、モーダルの灰色がかったカバーを削除するクラスmodal-backdropを削除します
Orozcorp

3

私はこのトリックでプログラム的にモーダルを閉じました

でモーダルにボタンを追加し、でボタンdata-dismiss="modal"を非表示にしますdisplay: none。これは次のようになります

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

プログラムでモーダルを閉じる場合は、そのボタンでクリックイベントトリガーするだけで、ユーザーには表示されません。

JavaScriptでは、次のようにそのボタンのクリックをトリガーできます。

document.getElementById('close-modal').click();

2

このコードは私がモーダルを閉じるのに完璧に機能しました(私はブートストラップ3.3を使用しています)

$('#myModal').removeClass('in')

2

私の場合、ブートストラップモーダルがトリガーされたメインページは、使用後に$("#modal").modal('toggle');応答しなくなりましたが、次のように応答し始めました。

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

2

これはうまくいきます

$(function () {
   $('#modal').modal('toggle');
});

ただし、複数のモーダルを積み重ねると効果的ではないため、代わりにこれが機能します

data-dismiss="modal"

2

いくつかのテストを行った後、ブートストラップモーダルの場合、$(.modal).modal('hide')を実行する 前にしばらく待機する必要があることがわかりました$(.modal).modal('show')。そして、私の場合、2つの間に少なくとも500ミリ秒の間隔が必要であることがわかりました。
これが私のテストケースと解決策です:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

この解き私は別のものを開くと、モーダルは、感謝を閉じていないとしていた問題
HAL9000

2

この参照を見ることができますが、このリンクが削除されている場合は、この説明を読んでください。

JavaScriptの1行でid myModalのモーダルを呼び出します。

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

オプション

オプションは、データ属性またはJavaScriptを介して渡すことができます。データ属性の場合、data-backdrop = ""のように、オプション名をdata-に追加します。

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

方法

非同期メソッドと遷移

すべてのAPIメソッドは非同期であり、遷移を開始します。トランジションが開始するとすぐに、それが終了する前に、呼び出し元に戻ります。また、移行中のコンポーネントのメソッド呼び出しは無視されます。

詳細については、JavaScriptのドキュメントを参照してください。

.modal(オプション)

コンテンツをモーダルとしてアクティブ化します。オプションのオプションオブジェクトを受け入れます。

$('#myModal').modal({
   keyboard: false
})

.modal( 'toggle')

モーダルを手動で切り替えます。モーダルが実際に表示または非表示になる前(つまり、showned.bs.modalまたはhidden.bs.modalイベントが発生する前)に呼び出し元に戻ります

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

.modal( 'show')

手動でモーダルを開きます。モーダルが実際に表示される前(つまり、showned.bs.modalイベントが発生する前)に呼び出し元に戻ります

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

.modal( 'hide')

モーダルを手動で非表示にします。モーダルが実際に非表示になる前(つまり、hidden.bs.modalイベントが発生する前)に呼び出し元に戻ります

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

.modal( 'handleUpdate')

モーダルが開いている間に高さが変化する場合(つまり、スクロールバーが表示される場合)は、モーダルの位置を手動で再調整します。

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

.modal( 'dispose')

要素のモーダルを破棄します。

イベント

ブートストラップのモーダルクラスは、モーダル機能にフックするためのいくつかのイベントを公開します。すべてのモーダルイベントは、モーダル自体(つまり、**)で発生します。タイプ説明

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

0

さらに、「x」をクリックしてダイアログを閉じることができます。例えば:

$(".ui-dialog-titlebar-close").click();


0

私の場合、ボタンを使用してモーダルを表示しました

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

したがって、私のコードでは、モーダル(id = 'my-modal-to-show'を持つ)を閉じるために、その関数を(Angular typescriptで)呼び出します。

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

$(modalId).modal( 'hide')を呼び出しても機能せず、理由がわかりません

PS .:私のモーダルでは、そのボタン要素も.closeクラスでコーディングしました

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

0

解決策がうまくいかない場合があるため、クラス内を適切に削除し、手動でcss display:noneを追加する必要があります。

$("#modal").removeClass("in");
$("#modal").css("display","none");
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.