JS封装遮罩

CodeCode!

于 2020-08-29 17:29:47 发布

阅读量165

点赞数

分类专栏： JS 文章标签： css js javascript html

本文链接：https://blog.csdn.net/qq_42847094/article/details/108297235

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

/* 参数 */
/* 
args:
 {
	 title:'温馨提示',
	 content:'内容',
	 confirmFn:function(){
		 var blueDiv = document.createElement('div');
		 blueDiv.style.backgroundColor = "blue";
		 blueDiv.style.width = "300px";
		 blueDiv.style.height = "300px";
		 body.appendChild(blueDiv);
	 }, s
	 cancelFn:function(){
		 
	 }
	 
 }
 
 */

function llAlert(args){
	var zhezhao = document.createElement('div'); /* 创建div*/
	zhezhao.className = "zhezhao"; /* 创建class属性*/
	/* zhezhao 后追加内容 */
	zhezhao.innerHTML = `
	<div class="alert">
		<div class="header"><span class="title">`+args.title+`</span><span class="close">X</span></div>
		<div class="main">
			`+args.content+`
		</div>
		<div class="btnList">
			<div class="btn yes">确定</div>
			<div class="btn no">取消</div>
		</div>
	</div>
	`
	/* 找到父元素 */
	var body = document.querySelector('body');	
	body.appendChild(zhezhao);/* 在父元素上追加内容 */
	
	/* 获取close元素（关闭） */
	var closeDiv = document.querySelector(".close");
	/* 设置关闭 点击事件 */
	closeDiv.onclick = function(){
		body.removeChild(zhezhao); /* 移除*/
	}
	
	/* 点击确定添加蓝色div */
	/* 1/找到确定按钮 */
	var yesDiv = document.querySelector(".btn.yes");
	yesDiv.onclick = function(){
		if(args.confirmFn() == 'function'){
			args.confirmFn(); /* 添加函数*/
		}else{
			console.error("函数没有设置参数");
		}
		
		
		body.removeChild(zhezhao); /* 添加后移除*/		
	}
			
	/* 取消 */
	var noDiv = document.querySelector(".btn.no");
	noDiv.onclick = function(){
		if(typeof args.cancelFn() == 'function'){
			args.cancelFn(); /* 取消函数*/
		}else{
			console.error("函数没有设置参数");
		}
		
		body.removeChild(zhezhao);
	}
			
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/alert.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		
		<button type="button">是否跳转到百度页面</button>
		
		<script type="text/javascript">
			var button = document.querySelector("button");/* 获取button元素 */
			button.onclick = function(){
				llAlert({
					title:"警告！",
					content:"是否跳转百度页面",
					confirmFn:function(){
						location.href = "https://www.bilibili.com/";/* 跳转页面 */
					},
					cancelFn:function(){
						var h1 = document.createElement("h1");
						h1.innerHTML = "用户已取消跳转页面";
						document.body.appendChild(h1);
					}
				})
			}
		</script>
	</body>
</html>

*{
	margin : 0;
	padding: 0;
	box-sizing: border-box;
}

/* 最外层 */
.zhezhao{
	position: fixed; /* 固定*/
	left: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: center; /* 垂直方向居中*/
	justify-content: center; /* 纵轴广告居中*/
}

/* 弹框 */
.alert{
	width: 600px;
	height: 400px;
	background-color: #fff;
	display: flex; 
	flex-direction: column; /* 内容垂直分布*/
}

/* 表头部 */
.alert>.header{
	height: 80px;
	line-height: 80px;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between; /* 每行内容两边排齐*/
	padding:0px 30px;
}

.alert>.header>.title{
	font-size: 30px;
	font-weight: 900;
	color: #ccc;
}

/* 关闭 */
.alert>.header>.close:hover{
	color: red;
}

/* 主要内容:放文字 */
.alert>.main{
	flex: 1;  /* 占一份*/
	padding:30px;
	border-bottom: 1px solid #ccc;
}

/* 设置按钮总位置大小 */
.alert>.btnList{
	height:80px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0 30px;
}
/* 按钮 */
.alert>.btnList>.btn{
	height: 60px;
	width:120px;
	text-align: center;
	line-height: 60px; 
	margin: 50px; /* 外边距*/
}

/* 设置按钮颜色 */
.alert>.btnList>.btn:nth-child(1){
	background-color: coral;
}

.alert>.btnList>.btn:nth-child(2){
	background-color: #999;
}

CodeCode!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS封装遮罩

效果/* 参数 *//* args: { title:'温馨提示', content:'内容', confirmFn:function(){ var blueDiv = document.createElement('div'); blueDiv.style.backgroundColor = "blue"; blueDiv.style.width = "300px"; blueDiv.style.height = "300px"; body.append
复制链接

扫一扫