1. 程式人生 > >使用JQuery定時關閉模態框

使用JQuery定時關閉模態框

    <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');
如果不加以上兩行程式碼,模態框關閉後模態框後的陰影無法關閉,這時會使網頁變成不可點選狀態。