js弹窗案例

最新推荐文章于 2021-05-20 14:36:13 发布

城南没有城北

最新推荐文章于 2021-05-20 14:36:13 发布

阅读量133

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42380289/article/details/108252593

版权

笔记专栏收录该内容

73 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.alert {
				width: 500px;
				height: 200px;
				background-color: cornsilk;
				border: 1px solid #CCC;
				position: absolute;
				left: calc(50% - 250px);
				top: calc(50% - 100px);
				z-index: 999;
				display: none; /* 关闭*/
			}

			.alert>.header {
				height: 30px;
				background-color: cornflowerblue;
				box-sizing: border-box;
				padding-left: 15px;
				line-height: 30px;
				/* 防止文字选中 */
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			.alert>.footer {
				height: 30px;
				width: 100%;
				background-color: #6495ED;
				position: absolute;
				bottom: 0;
				left: 0;
			}

			.alert>.footer>.btn {
				height: 100%;
				display: inline-block;
				float: right;
				margin-left: 10px;
			}

			.alert>.footer>.btn>button {
				vertical-align: middle;
				padding: 2px 15px;
			}

			.alert>.footer>.btn::after {
				content: "";
				display: inline-block;
				height: 100%;
				vertical-align: middle;
				width: 0;
			}
		</style>
		<script type="text/javascript">
			function myAlert() {
				var alert = document.querySelector(".alert");
				alert.style.display = "block";
				var confirm = alert.querySelector("#confirm");
				confirm.onclick = function() {
					alert.style.display = "none";
				}
				var isDown = false;
				var header = alert.querySelector(".header");
				header.addEventListener("mousedown", function(e) {
					isDown = true;
					var ofx = e.offsetX;
					var ofy = e.offsetY;
					//添加鼠标事件
					window.onmousemove = function(e1) {
						var x = e1.pageX;
						var y = e2.pageY;
						//新的定位
						var alertTop = y - ofy;
						var alertLeft = x = -ofx;
						if (isDown) {
							alert.style.left = alertLeft + "px";
							alert.style.top = alertTop + "px";
						}
					};
				});
				header.addEventListener("mouseup", function() {
					isDown = false;
				});
			}
			window.onload = function() {
				var btn = document.querySelector("#btn");
				btn.addEventListener("click", function() {
					myAlert();
				});
			}
		</script>
	</head>
	<body>
		<button id="btn">弹出</button>
		<div class="alert">
			<div class="header">
				<span>提示</span>
			</div>
			<div class="footer">
				<span class="btn">
					<button id="confirm">确定</button>
				</span>
			</div>
		</div>
	</body>
</html>

城南没有城北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js弹窗案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .alert { width: 500px; height: 200px; background-color: cornsilk; border: 1px solid #CCC; p
复制链接

扫一扫