月眸


js+css+html实现页面模态加载

毛毛小妖 2019-01-17 297浏览 1条评论
首页/ 正文
分享到: / / / /

有时候数据量比较大,我们加载页面的时候会有一段等待时间,这个时候页面会出现白屏,让人看了很不爽,于是出现了很多很炫的等待效果插件,本文就用原生的css+css+html来实现一个简单的实用的页面加载等待效果

1、html

首先在页面喜欢的地方放一个div,用来显示模态窗口,比如我们在页面最底部放一个这样的div

<div id="modal"> 
    <div class="modalBody">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
    </div>
</div>

2、css

在css样式表文件中写好样式

#modal {
    visibility: hidden;    
    position: fixed; 
    left: 0px;    
    top: 0px;
    right:0;
    bottom:0;
    text-align:center;
    z-index: 1000;
    background-color: #333; 
    opacity: 0.5;   /* 背景半透明 */
}
.modalBody{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 22% auto;
    text-align:center;
    padding:15px;
}
.modalBody span{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ddd;
    position: absolute;
    -webkit-animation: load 1.05s ease infinite;
}
@-webkit-keyframes load{
    0%{
        -webkit-transform: scale(1.2);
        opacity: 1;
    }
    100%{
        -webkit-transform: scale(.3);
        opacity: 0.5;
    }
}
.modalBody span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-10px;
    -webkit-animation-delay:0.13s;
}
.modalBody span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
}
.modalBody span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -10px;
    -webkit-animation-delay:0.39s;
}
.modalBody span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
}
.modalBody span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-10px;
    -webkit-animation-delay:0.65s;
}
.modalBody span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
}
.modalBody span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    -webkit-animation-delay:0.91s;
}
.modalBody span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
}

3、js

写我们的js文件

/**
 * 打开页面加载模态框
 */
function openModal(){
    var e1 = document.getElementById('modal');          
    e1.style.visibility =  (e1.style.visibility == "visible"  ) ? "hidden" : "visible";
}
/**
 * 关闭页面加载模态框
 */
function closeModal(){
	setTimeout(function(){
		var e1 = document.getElementById('modal');   
		e1.style.visibility =  'hidden';
	},600);
}

4、最后

在我们需要调用模态窗口的地方调用openModal() 方法即可,在加载完毕后再调用closeModal() 方法关闭模态窗口。

5、效果 

最后修改:2019-01-17 20:32:39 © 著作权归作者所有
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

上一篇

发表评论

说点什么吧~

评论列表

xq 2019-01-24 18:15:41
[奥特曼]
回复