jquery实现手机端移动端多种弹出层效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：jquery实现手机端移动端多种弹出层效果代码，包括alert、confirm、toast、loading及自定义层。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		 <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>弹窗插件</title>
		<style type="text/css">
			* {
			    margin: 0px;
			    padding: 0px;
			    box-sizing: border-box;
			    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			}
			div.main{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
			div.main button{width: 70%;height: 35px;line-height: 35px;margin: 10px 0;}
			*{ margin:0px; padding:0px; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
*:focus{ outline:none;}
ul,li{ list-style-type: none;}
.overflow{overflow: hidden;height: 100%;}
.dialog-modal-mask{ width:100%; height:100%; display: none; position: fixed; left:0; top:0; background:rgba(0,0,0,0.5); z-index:2222;}
#dialog-mask-toast,#dialog-mask-loading{background:rgba(0,0,0,0);}
.dialog-modal{ position: fixed; z-index:3333;  display: none; left:0; right:0; margin:auto; top:50%; transform-origin: center; max-width:78%; max-height:80%; background:#fff; border-radius:5px; overflow: hidden;}
.dialog-modal.dialog-modal-model{ width:400px;}
.dialog-modal.dialog-modal-success,.dialog-modal.dialog-modal-error{  padding:20px 12px; width:140px; }
.dialog-modal.dialog-modal-toast{ padding:8px 12px; max-width:150px; background:rgba(0,0,0,0.8); }
.dialog-modal.dialog-modal-toast .dialog-modal-text{ padding:0; color:#fff; }
.dialog-modal.dialog-modal-loading{  padding:20px 12px; width:100px; background:rgba(0,0,0,0.8); }
.dialog-modal.dialog-modal-loading .dialog-modal-text{ padding:0; color:#fff; }
.dialog-modal .dialog-modal-load{ display: flex; align-items: center; padding-top:10px; margin-bottom:15px; justify-content:center;}
.dialog-modal .dialog-modal-load span{ width:6px;  animation: dialog-alert-load 1s ease infinite; transform: translateY(10px); animation-delay:0.1s; margin:0 5px; height:6px; opacity:0; border-radius:6px; background:#fff;}
.dialog-modal .dialog-modal-load span:nth-child(2){ animation-delay:0.2s;}
.dialog-modal .dialog-modal-load span:nth-child(3){ animation-delay:0.3s;}
.dialog-modal .dialog-modal-title{ padding-top:18px; color:#333; font-weight:bold; font-size: 15px; text-align: center;}
.dialog-modal .dialog-modal-text{ font-size:16px; text-align: center; color:#333; line-height:23px; padding:18px 20px; }
.dialog-modal .dialog-modal-text.l{ text-align: left;}
.dialog-modal .dialog-modal-text input{width: 100%;height: 28px;line-height: 28px;padding: 0 5px;border: 1px solid #F1F1F1;}
.dialog-modal .dialog-modal-icon{ padding-bottom:12px;}
.dialog-modal .dialog-modal-icon svg{ margin:0 auto; display: block;}
.dialog-modal.dialog-modal-success .dialog-modal-text,.dialog-modal.dialog-modal-error .dialog-modal-text{ color:#14d6a2; padding:0; opacity:0; transform: translateY(10px); animation: dialog-alert-text 0.3s ease forwards; animation-delay:0.9s; }
.dialog-modal.dialog-modal-error .dialog-modal-text{ color:#f54655}
.dialog-modal .dialog-modal-content{ padding-top:0; overflow: hidden auto; max-height:80%; font-size:16px;}
.dialog-modal .dialog-modal-btn{ display:flex; align-items: center; border-top:1px solid #F5F5F5; justify-content: center; margin-top:5px;}
.dialog-modal .dialog-modal-btn button{ flex:1; color:#999; cursor: pointer; border:0; background:none; padding:14px;font-size:16px;border-right: 1px solid #F5F5F5;}
.dialog-modal .dialog-modal-btn button:last-child{ color:#35d535;border-right: none;}
.dialog-modal .dialog-modal-btn button.cancel{ }
.dialog-modal .dialog-modal-btn button:active{ opacity:0.8;}

.dialog-ani-open{ animation: dialog-open 0.2s ease forwards; }
.dialog-ani-close{ animation: dialog-close 0.3s ease forwards; }

@media (device-width:320px) and (-webkit-min-device-pixel-ratio:2){
	.dialog-modal .dialog-modal-text,.dialog-modal .dialog-modal-content,.dialog-modal .dialog-modal-btn button{font-size: 14px;}
	.dialog-modal .dialog-modal-title{padding-top: 15px;}
	.dialog-modal .dialog-modal-text{padding: 15px 20px;}
	.dialog-modal .dialog-modal-btn button{padding: 12px;}
}

@-webkit-keyframes dialog-open{  
   0%{ transform: scale(0.7); opacity:0;  } 
   100%{ transform: sc.........完整代码请登录后点击上方下载按钮下载查看