模态窗口的定时关闭

2021-05-29 23:52:51 阅读：158 来源： 互联网

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

标签：模态,窗口,rank,modal,跳转,定时,setTimeout
来源： https://blog.51cto.com/u_14201949/2832224

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

模态窗口的定时关闭