前端弹出框

最新推荐文章于 2024-05-10 22:35:33 发布

名字只是一个称呼

最新推荐文章于 2024-05-10 22:35:33 发布

阅读量1.2k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/qq_32003379/article/details/85224166

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>弹出框</title>
	<style>
		body{
			font-family: Arial,Helvetica,sans-serif;
			font-size: 17px;
			text-align: 1.5;
		}
		 
		#open_btn {
			background: #009900;
			width:80px;
			height:30px;
			border:0;
			color:white;
			border-radius: 5px;
			outline:none;
		}
		 
		#background {
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
		}
		 
		#div1 {
			background:#eeeeee;
			width: 40%;
			z-index: 1;
			margin: 12% auto;
			overflow: auto;
		}
		span {
			color: white;
			padding-top: 12px;
			cursor: pointer;
			padding-right: 15px;
		}
		 
		#div2 {
			background:#eeeeee;
			margin: auto;
			height: 250px;
			padding: 0 18px;
		}
		 
		#close {
			padding: 5px;
			background: #5cd31b;
		}
		 
		#close-button {
			float: right;
			font-size: 30px;
		}
		 
		#foot {
			padding: 5px 0;
			text-align: center;
			background: #5cd31b;
			color: white;
		}
		 
		h2 {
			margin: 10px 0;
			color: white;
			padding-left: 15px;
		}
		 
		h3 {
			margin: 0 0px;
			padding-top: 15px;
		}
	</style>
</head>
<body>
	<button id="open_btn" class="btn">弹出框</button>
	<!-- 弹窗内容开始 -->
	<div id="background" class="back">
		<div id="div1" class="content">
			<div id="close">
				<span id="close-button">×</span>
				<h2>导入被评人</h2>
			</div>
			<div id="div2">
				<h3>弹窗内容</h3>
				<select name="" id="">
					<option value="">请选择</option>
				</select>
				<br/><br/>
				<input type="file" placeholder="选择文件">
			</div>
			<div id="foot"><input id="cancel" type="button" value="取消" /></div>
		</div>
	</div>
	<!-- 弹窗内容结束 -->
	<script>
		var btn = document.getElementById('open_btn');
		var div = document.getElementById('background');
		var close = document.getElementById('close-button');
		var cancel = document.getElementById('cancel');
		 
		btn.onclick = function show() {
			div.style.display = "block";
		}
		 
		close.onclick = function close() {
			div.style.display = "none";
		}
		 
		cancel.onclick = function cancel(){
			div.style.display = "none";
		}

		window.onclick = function close(e) {
			if (e.target == div) {
				div.style.display = "none";
			}
		}
	</script>
</body>
</html>

名字只是一个称呼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端弹出框

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;弹出框&lt;/title&gt
复制链接

扫一扫

专栏目录