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

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

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看