jquery自定义弹框

最新推荐文章于 2025-05-31 11:02:14 发布

一个人的世界、

最新推荐文章于 2025-05-31 11:02:14 发布

阅读量793

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43727538/article/details/97614798

本文详细介绍了如何利用jQuery库创建自定义的弹窗组件。从HTML结构的搭建，到CSS样式的设计，再到JavaScript交互逻辑的实现，一步步解析弹窗的动态显示与隐藏，以及如何与页面元素进行交互，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			list-style: none;
			text-decoration: none;
		}
		body{font-family: "微软雅黑";}
		.btns{
			padding: 8px 15px;
			color: #000000;
			background: #7AA1EF;
			margin: 100px auto;
			display: block;
			width: 150px;
			text-align: center;
		}
		.kuang{
			width: 600px;
			height: 340px;
			border: 1px solid red;
			padding: 2px;
			background: darkgrey;
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 999;
			display: none;
		}
		.kuang h2{
			height: 25px;
			font-size: 14px;
			background: #FF9900;
			color: #000000;	
		}
		.div_02{
			padding: 10px;
		}
		.div_02 p{
			font-size: 2em;
		}
		.zhezhao{
			width: 100%;
			height: 100%;
			top: 0;
			background: #A9A9A9;
			position: absolute;
			z-index: 94;
			opacity: 0.4;
		}
	</style>
	<body>
		<a href="#" class="btns">点击</a>
		<div class="kuang">
			<h2>自定义弹出层 <a href="#" class="close">关闭</a></h2>
			<div class="div_02">
				<p>hasdladls</p>
			</div>
		</div>
		<div id="zhezhao"></div>
		<script type="text/javascript">
			$(function(){
				$('.btns').click(function(){//点击时让弹框出现
					$('.kuang').show();
					var rw=$(window).width()/2
					$('.kuang').animate({top:300,opacity:'show',width:600,height:340,right:rw},500)
					$('#zhezhao').addClass('zhezhao');
				})
				$('.close').click(function(){//点击让弹框关闭
					$(this).parents('.kuang').hide(500);
					$('#zhezhao').removeClass('zhezhao');
				})
				$('.kuang h2').mousedown(function(e){//让弹框可拖动
					var lefts=$(this).offset(); //当前元素距离左边和上边的距离
					var left=e.pageX-lefts.left;//鼠标距离左边的距离减元素距离左边的距离
					var top=e.pageY-lefts.top;
					 $(document).mousemove(function(e){
						var x=e.pageX-left;//因为元素距离左边的距离是不变的，而鼠标距离是改变的，所有需要鼠标的距离减去鼠标与元素距离之差
						var y=e.pageY-top;
						$('.kuang').css({
							'left':x,
							'top':y
						})
					})
				})
				$('.kuang h2').mouseup(function(){
					$(document).unbind('mousemove');
				})
			})
		</script>
	</body>
</html>