利用bootstrap模态框做网站升级维护的提示消息框
<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">
×
</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 个评论
就喜欢你有好东西不藏着掖着,和大家分享的好习惯。:)