使用JQuery定時關閉模態框
阿新 • • 發佈:2018-12-29
關鍵程式碼:<h2>建立模態框(Modal)</h2> <!-- 按鈕觸發模態框 --> <button btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button> <!-- 模態框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button id="d" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模態框(Modal)標題</h4> <div id="test"></div> </div> <div class="modal-body">在這裡新增一些文字</div> <div class="modal-footer"> <button id="c" type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button id="b" type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.js"></script> <script> function modalClose() { //$("#myModal").modal('hide'); $('#myModal').modal('hide'); $(".modal-backdrop").remove(); $("body").removeClass('modal-open'); //$("#d").trigger('click'); } $("#b").click(function () { $("#test").html("模態框將在3秒後自動關閉"); //setTimeout($("#myModal").hide(), 5000); setTimeout(modalClose, 3000); }); </script>
$(".modal-backdrop").remove();
$("body").removeClass('modal-open');
如果不加以上兩行程式碼,模態框關閉後模態框後的陰影無法關閉,這時會使網頁變成不可點選狀態。