ブートストラップのモーダルダイアログボックスがあるのですが、最初は表示され、ユーザがページをクリックすると消えます。以下のようにします:
$(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>
モーダルは最初に表示されますが、モーダルの外側をクリックしても閉じません。また、コンテンツ領域はグレーアウトされません。モーダルが最初に表示され、ユーザーが領域外をクリックすると閉じるようにするにはどうすればよいですか?また、デモのように背景をグレーアウトするにはどうすればよいでしょうか?
ブートストラップ modal を閉じるには、次のようにモーダルメソッドにオプションとして 'hide' を渡します。
$('#modal').modal('hide');
動作中の [フィドルはこちら][2] をご覧ください。
たとえば、モーダルがユーザーから隠され終わったときにイベントを発生させたい場合は、 hidden.bs.modal イベントを使用できます。モーダルのメソッドとイベントについては、 ドキュメント を参照してください。
上記のどの方法でもうまくいかない場合は、クローズボタンに id を与えて、クローズボタンがクリックされたことをトリガーしてください。
モーダルポップアップは次の方法で閉じることができます。。
// 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.
<。!-スニペットを開始:js hide:false console:true babel:false -->。
<!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">×</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>
<。!-終了スニペット-->。
$( '.modal.in').modal( 'hide');
。
1ページで複数のモーダルポップを使用している場合は、上記のコードを使用してモーダルの背景を非表示にします。
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);
}
}
});
};
このトリックを使用して、プログラムごとにモーダルを閉じました。
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();
私の場合、ブートストラップモーダルが使用されたメインページは、 $( "#modal").modal( 'toggle');
の方法を使用した後に応答しなくなりましたが、次の方法で応答を開始しました。
$("#submitBtn").on("click",function(){
$("#submitBtn").attr("data-dismiss","modal");
});