Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用

利用bootstrap模态框做网站升级维护的提示消息框

1.png

 <link rel="stylesheet" href="/notification/css/bootstrap.min.css">
<script src="/notification/js/jquery.min.js"></script>          
<script src="/notification/js/bootstrap.min.js"></script>
  <!-- 模态框(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 type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            Website is being upgraded and maintained
                        </h4>
                    </div>
                    <div class="modal-body">
                        We will resume normal access as soon as possible<br>
                        Expect one hour,Stay tuned<br>
                        <div id="show"></div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    <script>
         //加载模态框
         $('#myModal').modal();

        var show = document.getElementById("show");  
        setInterval(function() {   
        var time = new Date();   // 程序计时的月从0开始取值后+1   
        var m = time.getMonth() + 1;   
        var t = time.getFullYear() + "-" + m + "-"     
        + time.getDate() + " " + time.getHours() + ":"     
        + time.getMinutes() + ":" + time.getSeconds();   
        show.innerHTML = t;  
        }, 100); 

    </script>
<style>
/*模态框*/
.modal-body{
    font-size: 18px;
}
#show{
    font-size: 30px;
}
.modal-open{
    overflow-y: scroll;
    padding-right: 0 !important;
}
/*主要是最后一个css样式,是fix掉bootstrap模态框关闭时的抖动问题*/
</style>
1
2018-11-14

1 个评论

就喜欢你有好东西不藏着掖着,和大家分享的好习惯。:)

要回复文章请先登录注册