<!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>
jquery自定义弹框
最新推荐文章于 2025-05-31 11:02:14 发布