web-dev-qa-db-ja.com

ブートストラップモーダル

私が最初に表示したいブートストラップモーダルダイアログボックスがあります、そしてユーザーがページをクリックするとき、それは消えます。私は以下を持っています：

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

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

jquerytwitter-bootstrapmodal-dialog
355
Nick B

modal('toggle')の代わりにmodal(toggle)を入れてください

$(function () {
   $('#modal').modal('toggle');
});
572
Tamil Selvan C

閉じるbootstrap modal 渡すことができます 'hide' モーダルメソッドのオプションとして次のように

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

動作をご覧くださいここを中心に

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

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

374
Subodh Ghulaxe
$('#modal').modal('toggle');

または 

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

うまくいくはずです。

しかし、他に何もうまくいかない場合は、モーダルクローズボタンを直接呼び出すことができます。

$("#modal .close").click()
59
Robert Benyi

これは私のために働いた：

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

このリンクを使う modal close

27
santhosh
$("#your-modal-id").modal('hide');

クラス($(".my-modal"))経由でこの呼び出しを実行してもうまくいきません。

16
Yishai Landau

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

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

私の5セントは、ブートストラップモーダルをidでターゲティングする必要はないということです。一度に1つのモーダルしか存在しないはずなので、次のものがトグルが危険な可能性があるのでモーダルを削除するのに十分です：

$('.modal').removeClass('show');
7
Andre Van Zuydam

状況によっては、入力ミスが原因である可能性があります。たとえば、あなたが持っていることを確認してください：

data-dismiss="modal"

ではなく 

data-dissmiss="modal"

2番目の例にある二重の "ss"は、閉じるボタンが失敗する原因になります。

7
zinczinc

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

// 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
Sheo Dayal Singh
   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);
               }
           }
       });
   };
5
Sheladiya Ajay

これを試してください

$('#modal_id').modal('hide');
5
Love Kumar

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

4
Ganesh Putta

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

1ページで複数のモーダルポップを使用している場合は、上記のコードを使用してモーダルの背景を隠してください。

4
sher bahadur

あなたは使うことができます。

$('#' + $('.modal.show').attr('id')).modal('hide');
4
Fatih Turan

Modal.hideを使用してもモーダルは隠されるだけです。モーダルの下にオーバーレイを使用している場合、それはまだ存在します。クリック呼び出しを使用して実際にモーダルを閉じ、オーバーレイを削除します。

$("#modalID .close").click()
3
Vikalp Veer

これを行うもう1つの方法は、最初にmodal-openクラスを削除することです。次に、モーダルの灰色がかったカバーを削除するクラスmodal-backgroundを削除します。 

以下のコードが使用できます。

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

このコードは私がモーダルを閉じるのに完璧に働きました（私はブートストラップ3.3を使っています）

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

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

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

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

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

その上、 'x'をクリックするとダイアログが閉じます。

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

1
slashka

私の場合は、モーダルを表示するためにボタンを使用しました 

<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'）を呼び出しても機能しません。理由がわかりません。

シモンズ：私のモーダルで私は.closeクラスでもそのボタンの要素をコーディングした 

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

これはうまくいきます

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

ただし、複数のモーダルが重なっている場合は効果がありません。代わりに、これでうまくいきます

data-dismiss="modal"
0
Edgar256