模态窗口的定时关闭

模态窗口的定时关闭:有时我们可能在填完信息或发完贴字之后会想要弹出一个“验证成功”或者“发帖成功”的小弹窗,如下图所示,并且希望这个小弹窗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="width: 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="width: 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="width: 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秒后这个窗口自动消失,因为要弹出两个窗口,所以必须给跳转配置一个定时器,使它延时跳转,否则第二个窗口会显示不出来。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值