css部分

#public_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(0,0,0,.4);}
.spinner {
margin:-17px -75px;
width: 150px;
position:absolute;
top:50%;
left:50%;
text-align: center;
}

.spinner > div {
width: 30px;
height: 30px;
background-color: #1A1A1A;

border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

/*remind*/
#remindBg{width:100%;position:fixed;bottom:90px;left:0;animation:moveRemind linear 0.6s;z-index:999;display:flex;justify-content:center;align-items:center;}
#remindBg #remindBox{max-width:70%;min-width:30%;line-height:16px;font-size:14px;padding:10px 15px;background:rgba(0,0,0,.7);color:white;border-radius:4px;text-align:center;}
@keyframes moveRemind{
0%{bottom:0;opacity:0;transform:scale(0.6);}
40%{bottom:90px;opacity:0.3;transform:scale(1.2);}
100%{bottom:90px;opacity:1;transform:scale(1);}
}
@-webkit-keyframes moveRemind{
0%{bottom:0;opacity:0;transform:scale(0.6);}
40%{bottom:90px;opacity:0.3;transform:scale(1.2);}
100%{bottom:90px;opacity:1;transform:scale(1);}
}

/*查看更多的按鈕*/
.lookbtn{width:100%;height:44px;text-align:center;line-height:44px;font-size:12px;color:#1A1A1A;box-shadow:0px -2px 10px #E5E5E5;}
/*彈框樣式*/
#bounces_bg{width:100%;height:100%;position:fixed;z-index:90;top:0;left:0;display:flex;justify-content:center;align-items:center;display:-webkit-flex;-webkit-justify-content:center;-webkit-align-items:center;background:rgba(51,51,51,.4);}
#bounces_bg .bounces_box{width:280px;border-radius:10px;background:white;font-size:16px;color:#1A1A1A;line-height:24px;text-align:center;-webkit-animation:bouncesMove .4s ease;animation:bouncesMove .4s ease;}
#bounces_bg .bounces_box .bounces_title{width:240px;padding:30px 20px;overflow:hidden;}
#bounces_bg .bounces_box .bounces_btn{width:100%;height:40px;border-top:1px solid #E5E5E5;display:flex;justify-content:space-between;align-items:center;display:-webkit-flex;-webkit-justify-content:space-between;-webkit-align-items:center;}
#bounces_bg .bounces_box .bounces_btn .bounces_off,#bounces_bg .bounces_box .bounces_btn .bounces_on{width:50%;height:40px;line-height:40px;position:relative;top:0;left:0;}
#bounces_bg .bounces_box .bounces_btn .bounces_on:after{content:'';width:1px;height:40px;position:absolute;left:0;top:0;background:#E5E5E5;}
@keyframes bouncesMove {
0%{
opacity:0;
transform:translateX(-100%);
-webkit-transform: translateX(-100%);
}
75% {
opacity:.75;
transform: translateX(30%);
-webkit-transform: translateX(30%);
}
100% {
opacity:1;
transform: translateX(0);
-webkit-transform: translateX(0);
}
}

js部分

function Publicfun(){
　　this.loading=function(){
　　　　//創建div標簽
　　　　var public_box=document.createElement('div');
　　　　var str='<div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>';
　　　　public_box.id="public_box";
　　　　public_box.innerHTML=str;
　　　　//將新的div標簽插入到頁面
　　　　document.documentElement.appendChild(public_box);
　　　　//頁面滑動事件阻止
　　　　public_box.ontouchmove=function(e){
　　　　　　e.preventDefault();
　　　　}
　　},
　　this.hideLoad=function(){
　　　　setTimeout(function(){
　　　　　　document.documentElement.removeChild(document.getElementById('public_box'))
　　　　},300);
　　},
　　this.remind=function(title){
　　　　var remindBg=document.createElement('div');
　　　　var str='<div id="remindBox">'+title+'</div>';
　　　　remindBg.id="remindBg";
　　　　remindBg.innerHTML=str;
　　　　//插入標簽
　　　　document.documentElement.appendChild(remindBg);
　　　　setTimeout(function(){
　　　　　　document.documentElement.removeChild(remindBg)
　　　　},1000);
　　},
　　//彈框確認模板按鈕
　　this.bounces=function(title,show){
　　　　//創建模板框
　　　　var bounces=document.createElement('div');
　　　　var str='<div id="bounces_bg"><div class="bounces_box"><div class="bounces_title">'+title+'</div><div class="bounces_btn"><div id="close_bounces_box" 　　　　class="bounces_off">取消</div><div id="bounces_on_btn" class="bounces_on">確認</div></div></div></div>';
　　　　bounces.id="bounces_bg";
　　　　//插入模板布局
　　　　bounces.innerHTML=str;
　　　　//插入標簽
　　　　document.documentElement.appendChild(bounces);
　　　　//點擊取消按鈕
　　　　document.getElementById('close_bounces_box').οnclick=function(){
　　　　　　document.documentElement.removeChild(bounces);
　　　　};
　　　　//點擊確認按鈕
　　　　document.getElementById('bounces_on_btn').οnclick=function(){
　　　　　　//執行回調函數
　　　　　　show();
　　　　　　//清除彈框
　　　　　　document.documentElement.removeChild(bounces);
　　　　}
　　　　//頁面滑動事件阻止
　　　　bounces.ontouchmove=function(e){
　　　　　　e.preventDefault();
　　　　}
　　}
}
var publicFun=new Publicfun();

轉載于:https://www.cnblogs.com/bluesky1024/p/8110840.html

總結

以上是生活随笔為你收集整理的常用UI模板，loading框，提醒框，弹框确认框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。