jquery自定义弹框

本文详细介绍了如何利用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值