[转]html实现弹窗的实例

西红柿炒番茄31

已于 2022-08-09 09:08:23 修改

阅读量1.1w

点赞数 3

分类专栏： HTML 文章标签： html 前端 javascript

于 2022-07-26 21:58:06 首次发布

原文链接：https://www.jb51.net/html5/778542.html

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

上午闲来无事，用html及原生js写个弹窗，供参考。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
			}
			.zhezhao{
				position: fixed;
				left: 0px;
				top: 0px;
				background: #000;
				width: 100%;
				height: 100%;
				opacity: 0.5;
			}
			.tankuang{
				position: relative;
				background: #fff;
				width: 50%;
				height: 80%;
				border-radius: 5px;
				margin: 5% auto;
			}
			#header{
				height: 40px;
			}
			#header-right{
				position: absolute;
				width: 25px;
				height: 25px;
				border-radius: 5px;
				background: red;
				color: #fff;
				right: 5px;
				top: 5px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="dianwo()">点我</button>
		<div class="zhezhao" id='zhezhao'>
			<div class="tankuang">
				<div id="header">
					<span>我是弹窗</span>
					<div id="header-right" onclick="hidder()">x</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			document.getElementById('zhezhao').style.display="none";
			function dianwo(){
				document.getElementById('zhezhao').style.display="";
			}
			function hidder(){
				document.getElementById('zhezhao').style.display="none";
			}
		</script>
	</body>
</html>

在这里插入图片描述

<style>
	.zhezhao{
		position: fixed;
		left: 0px;
		top: 0px;
		/*background: #000;*/
		width: 100%;
		height: 100%;
		opacity: 0.7;
	}
	.tankuang{
		position: relative;
		background: #000;
		width: 150px;
		height: 50px;
		border-radius: 5px;
		top: 50%;
	}
	#header{
		height: 40px;
		display: flex;
	}
	#header-right{
		position: absolute;
		width: 25px;
		height: 25px;
		border-radius: 5px;
		background: red;
		color: #fff;
		right: 5px;
		top: 5px;
		text-align: center;
	}
</style>

<center>
	<div class="zhezhao" id='zhezhao'>
		<div class="tankuang">
			<div id="header">
				<span style="color:#ffffff; font-size:20px;margin: auto;line-height: 50px;" id="layer_msg">复制成功</span>
			</div>
		</div>
	</div>
</center>

<scrtip>
	document.getElementById('zhezhao').style.display="none";
	function dianwo(str){
		document.getElementById('layer_msg').innerHTML = str;
		document.getElementById('zhezhao').style.display="";
		setTimeout(function(){
			document.getElementById('zhezhao').style.display="none";
		},5000);
	}
</scrtip>