javascript学习-弹框

最新推荐文章于 2024-09-05 11:00:53 发布

加油吧qaq

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量111

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107499965

版权

一个弹框的例子：

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<button type="button">弹框</button>
		<script type="text/javascript">
			var btn=document.querySelector('button')
			btn.onclick=function(){
			   var zhezhao=document.createElement('div')
			   zhezhao.className="zhezhao";
			   zhezhao.innerHTML=`<div class="zhezhao">
			<div class="alert">
				<div class="header">
					<span class="title">温馨提示</span>
					<span class="close">x</span>
			    </div>
				<div class="main">
					是否在页面添加一个蓝色的div
				</div>
				<div class="btnList">
					<div class="btn" id="ok">确定</div>
					<div class="btn" id="no">取消</div>
				</div>
			</div>
		</div> `
		    var body=document.querySelector('body')
			body.appendChild(zhezhao)
			//获取close元素
			var closediv=document.querySelector(".close")
			closediv.onclick=function(){
				body.removeChild(zhezhao)
			  }
			  var ok=document.querySelector('#ok');
			  ok.onclick=function(){
				  var adddiv=document.createElement("div");
				  adddiv.style.backgroundColor='blue';
				  adddiv.style.width='400px';
				  adddiv.style.height='400px';
			     body.removeChild(zhezhao);
				 body.appendChild(adddiv);
				  
			  }
			  var no=document.querySelector('#no');
			  no.onclick=function(){
				  body.removeChild(zhezhao)
			  }

			}
			
			
			
		</script>
	</body>
</html>

style.css

*{
	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: #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 40px;
}
.alert>.header>.title{
	font-size: 20px;
	font-weight: 900;
}
.alert>.header>.close{
	font-size: 30px;
	font-weight: 100;
	color: #ccc;
}
.alert>.header>.close:hover{
	color: firebrick;
}
.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: 50px;
	width: 120px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	margin: 10px;
}
.alert>.btnList>.btn:nth-child(1){
	background: coral;
}
.alert>.btnList>.btn:nth-child(2){
	background: #999;
}

效果：
在这里插入图片描述
点击增加蓝色div

封装弹框插件：

将以上方法中的弹框标题，内容，和取消确认的功能封装，以参数传入：

html:

<!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.onclick=function(){
				newalert({
					title:"警告",
					content:"是否跳转到百度？",
					confirmFn:function(){
						location.href="http://baidu.com"
					},
				})
			}
			
		</script>
	</body>
	
</html>

alert.js

function newalert(args){      //args对象
	
	    var zhezhao=document.createElement('div')
		   zhezhao.className="zhezhao";
		   zhezhao.innerHTML=`<div class="zhezhao">
		<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" id="ok">确定</div>
				<div class="btn" id="no">取消</div>
			</div>
		</div>
	</div> `
	    var body=document.querySelector('body')
		body.appendChild(zhezhao)
		//获取close元素
		var closediv=document.querySelector(".close")
		closediv.onclick=function(){
			body.removeChild(zhezhao)
		  }
		  var ok=document.querySelector('#ok');
		  ok.onclick=function(){
			 args.confirmFn();
			  body.removeChild(zhezhao)
		  }
		  var no=document.querySelector('#no');
		  no.onclick=function(){
			  typeof args.cancelFn=='function'?args.cancelFn:null;
			  body.removeChild(zhezhao)
		  }
}

style.css和上面例子相同
效果：
在这里插入图片描述

加油吧qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-弹框

一个弹框的例子：html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <button type="button"
复制链接

扫一扫