tzboy-web-alert
/
example.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
	<title>web-alert</title>
	<link rel="stylesheet" type="text/css" href="./static/css/web-alert.css">
	<style type="text/css">
		title{text-align: center;font-size: 20px;font-weight: bold;}
		code{display: inline-block;margin:20px 0px;padding: 10px 20px;border-radius: 10px;background-color: #5486af;color: #fff;font-size: 12px;}
		p{margin: 5px 0px;}
		code > p > span{display: inline-block;width: 250px;}
		fieldset{border-color: #83a4d4;padding: 20px 30px;}
		legend{padding: 0px 20px;color: #83a4d4;font-weight: 500;font-size: 16px;letter-spacing: 1px;}
		.example{font-size: 14px;}
		.example .line{display: inline-block;width: 100%;height: 1px;border-top: 3px dashed #e3e3e3;}
		.example .btn{display: inline-block;padding: 7px 20px;text-align: center;background-color: #3c5784;color: #fff;border-radius: 5px;cursor: pointer;}
	</style>
</head>
<body>
	<div class="example">
		<title>web-alert</title>
		<fieldset>
			<legend>Author:Tzboy</legend>
			<!--  -->
			<div class="btn example1" onClick="example1()">弹个内容框</div>
			<div>
				<code>
					<p>wa.showContent({</p>
					<p style="text-indent: 20px;"><span>"title":"这是一个弹框",</span>  	 /* 标题 */</p>
					<p style="text-indent: 20px;"><span>"content":"这里是内容",</span> 	 /* 内容 */</p>
					<p style="text-indent: 20px;"><span>"mask":"0.6",</span> 			 /* 蒙层透明度 */</p>
					<p style="text-indent: 20px;"><span>"titleBgc":"#fff,</span> 		 /* 标题背景颜色 */</p>
					<p style="text-indent: 20px;"><span>"titleColor":"#3e3e3e",</span> 	 /* 标题字体颜色 */</p>
					<p style="text-indent: 20px;"><span>"confimText":"确定",</span> 		 /* 确定按钮 字样 */</p>
					<p style="text-indent: 20px;"><span>"confimBgc":"#3e3e3e",</span> 	 /* 确定按钮 背景颜色 */</p>
					<p style="text-indent: 20px;"><span>"confimColor":"#3e3e3e",</span> 	 /* 确定按钮 字体颜色 */</p>
					<p style="text-indent: 20px;"><span>"cancelText":"关闭",</span> 		 /* 取消按钮 字样 */</p>
					<p style="text-indent: 20px;"><span>"cancelBgc":"#bfbfbf",</span> 	 /* 取消按钮 背景颜色 */</p>
					<p style="text-indent: 20px;"><span>"cancelColor":"#808080",</span> 	 /* 取消按钮 字体颜色 */</p>
					<p style="text-indent: 20px;"><span>"showCancel":false,</span> 		 /* 是否显示 取消按钮 */</p>
					<p style="text-indent: 20px;"><span>"width":"500px",</span> 			 /* 宽度设置 */</p>
					<p style="text-indent: 20px;"><span>"height":"300px",</span> 		 /* 高度设置 */</p>
					<p style="text-indent: 20px;"><span>"done":function(){},</span>       /* 完成回调 */</p>
					<p style="text-indent: 20px;"><span>"confim":function(){},</span>	 /* 点击确定按钮 */</p>
					<p style="text-indent: 20px;"><span>"cencel":function(){},</span>	 /* 点击取消按钮 */</p>
					<p>});</p>
				</code>
			</div>

			<div class="line"></div>

			<div class="btn example1" onClick="example2()">弹个消息框</div>
			<div>
				<code>
					<p>wa.showToast({</p>
					<p style="text-indent: 20px;"><span>"msg":"这是一个提示消息",</span>  	 /* 提示信息 */</p>
					<p style="text-indent: 20px;"><span>"icon":"warning",</span> 	 	 /* icon（warning|success|error） */</p>
					<p style="text-indent: 20px;"><span>"mask":"1",</span> 				 /* 透明度 */</p>
					<p style="text-indent: 20px;"><span>"theme":"blue",</span> 	 		 /* 主题(blue|green|orange|red) */</p>

					<p style="text-indent: 20px;"><span>"position":'center',</span> 	 /* 位置设置(center|leftTop|rightTop) */</p>
					<p style="text-indent: 20px;"><span>"done":function(){},</span>      /* 完成回调 */</p>
					<p>});</p>
				</code>
			</div>

			<div class="line"></div>

			<div class="btn example1" onClick="example3()">加载框</div>
			<div>
				<code>
					<p>wa.showLoading({</p>
					<p style="text-indent: 20px;"><span>"position":'centerTop',</span> 	 /* 位置设置(centerTop) */</p>
					<p style="text-indent: 20px;"><span>"done":function(){},</span>      /* 完成回调 */</p>
					<p>});</p>
				</code>
			</div>

			<div class="line"></div>

			<div class="btn example1" style="background-color: #969494;">关闭加载框</div>
			<div>
				<code>
					<p>wa.hideLoading(key); /* showLoading的回调方法的done 携带的key; */</p>
				</code>
			</div>

			<div class="btn example1" style="background-color: #969494;">主动关闭某个弹框</div>
			<div>
				<code>
					<p>wa.close(key); /* 回调方法的done|confim|cencel 携带的key; */</p>
				</code>
			</div>

		</fieldset>
	</div>

</body>
<script type="text/javascript" src="./static/js/web-alert.js"></script>
<script type="text/javascript">
	function example1(){
		wa.showContent({
			"title":"这是一个弹框",
			"content":'这里是内容',
			"mask":"0.6",
			"titleBgc":"#fff",
			"titleColor":"#3e3e3e",
			"confimText":"确定",
			"confimBgc":"#2a69b7",
			"confimColor":"#fff",
			"cancelText":"关闭",
			"cancelBgc":"#bfbfbf",
			"cancelColor":"#808080",
			"showCancel":false,
			"width":"80%",
			"height":"300px",
			"done":function(key){
				console.log("[web-alert]:showContent is done");
			},
			"confim":function(key){
				wa.showToast({
					"msg":"You click confim btn",
					"mask":1,
					"position":"rightTop",
				});
				wa.close(key);
			},
			"cencel":function(key){
				wa.showToast({
					"msg":"You click cencel btn",
					"mask":1,
					"position":"centerTop",
					"theme":"red",
					"icon":'error',
				});
				wa.close(key);
			}
		});
	}

	function example2(){
		wa.showToast({
			"msg":"这是一个提示消息",
			"mask":1,
			"theme":"red",
			"icon":'error',
			"position":"rightTop",
		});
	}

	function example3(){
		wa.showLoading({
			"position":'centerTop',
			"done":function(key){
				setTimeout(()=>{
					wa.hideLoading(key);
				},3000);
			}
		});
	}
</script>
</html>