模态窗口的定时关闭

模态窗口的定时关闭：有时我们可能在填完信息或发完贴字之后会想要弹出一个“验证成功”或者“发帖成功”的小弹窗，如下图所示，并且希望这个小弹窗1s之后就自动消失

这是我们就可以用模态窗口配合js的setTimeOut定时器来完成，从bootstrap直接粘来模态窗口的代码后，删去自己不想要的部分（删去模态窗口的body和footer,还有title），最终变成下面这样

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style=" 300px;margin: 100px auto">
        <div class="modal-content" >
            <div class="modal-header">
                发帖成功
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

再辅以js代码控制，最终就实现了上面说的效果：

<script>

        $(function(){        // 页面加载完毕后自动弹出该模态窗口
             $("#myModal").modal('show')
            setTimeout(function(){
                // 1s后关闭模态窗口
                 $('#myModal').modal('hide');

                // 必须等1s才能跳转
                setTimeout("location.href = '${pageContext.request.contextPath}/page/main'", 2000);

            },1000);
        }
        );

    </script>

如果有两个模态窗口要相继弹出，那么跳转的语句也必须设置定时器等第二个模态窗口消失后才跳转，否则可能看不到第二个模态窗口的弹出就已经发生跳转了。

先写两个模态窗口，两个窗口设置不同的Id属性

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style=" 300px;margin: 100px auto">
        <div class="modal-content" >
            <div class="modal-header">
                发帖成功
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<%--升级提示--%>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style=" 300px;margin: 100px auto">
        <div class="modal-content" >
            <div class="modal-header">
                恭喜升级成功
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

辅以js定时控制：

<script>
        $(function(){
             $("#myModal").modal('show')
            setTimeout(function(){
                 $('#myModal').modal('hide');

                // 判断是否升级
                // 获取model中rank的值， 判断是否升级
                var rank = "${rank}";
                if(rank > 0){
                    // 如果等级提升，则延迟跳转
                    $("#myModal2").modal('show');
                    setTimeout("$('#myModal2').modal('hide')", 2000);
                }
                // 必须等2s才能跳转
                setTimeout("location.href = '${pageContext.request.contextPath}/page/main'", 2000);

            },1000);
        }
        );
</script>

写完js后就可以实现先弹出一个“发帖成功”的小窗口，1秒后该窗口自动消失，获取session中的rank是否改变，如果改变则继续弹出“升级成功”的小窗口，最后2秒后这个窗口自动消失，因为要弹出两个窗口，所以必须给跳转配置一个定时器，使它延时跳转，否则第二个窗口会显示不出来。