HTML可拖动自定义弹出层

OECOM

发布于 2020-07-02 11:25:46

2.6K0

发布于 2020-07-02 11:25:46

文章被收录于专栏：OECOM

最近在进行web项目开发过程中，遇到了一个需求，就是需要弹出层可以用鼠标拖动。之前经常做的是弹出一个弹出层来提示用户信息或者是弹出一个弹出层进行登录，缺点是不能根据用户的视觉习惯定位他。下面我来介绍一个方法来解决这个问题。以下方法通过扩展jquery来进行开发。

HTML部分代码

在html部分我们用一个登录框来展示

<button class="login">login</button>
<div id="login"> 
	<h2>网站登录</h2> 
	<form id="loginForm" > 
		<div class="info"></div> 
		<div class="user">帐 号：<input type="text" name="user" class="text" /></div> 
		<div class="pass">密 码：<input type="password" name="pass" class="text" /></div> 
		<div class="button"><input type="button" name="sub" class="submit" value="" /></div> 
	</form> 
	<div class="other">注册新用户 | 忘记密码？</div> 
</div>

页面部分为有一个login按钮，点击按钮弹出login层

CSS部分代码

	#login { 
width:350px; 
height:250px; 
border:1px solid #ccc; 
position:absolute; 
display:block; 
z-index:9999; 
background:#fff; 
display:none;
} 
#login h2 { 
height:40px; 
line-height:40px; 
text-align:center; 
font-size:14px; 
letter-spacing:1px; 
color:#666; 
margin:0; 
padding:0; 
border-bottom:1px solid #ccc; 
cursor:move; 
} 
#login h2 img { 
float:right; 
position:relative; 
top:14px; 
right:8px; 
cursor:pointer; 
} 
#login div.info { 
padding:10px 0 5px 0; 
text-align:center; 
color:maroon; 
} 
#login div.user, #login div.pass { 
font-size:14px; 
color:#666; 
padding:5px 0; 
text-align:center; 
} 
#login input.text { 
width:200px; 
height:25px; 
border:1px solid #ccc; 
background:#fff; 
font-size:14px; 
} 
#login .button { 
text-align:center; 
padding:15px 0; 
} 
#login input.submit { 
width:107px; 
height:30px; 
border:none; 
cursor:pointer; 
} 
#login .other { 
text-align:right; 
padding:15px 10px; 
color:#666; 
}
.close{
	float: right;
    margin-right: 15px;
   cursor:pointer;
}

这里面主要注意的是关于div样式的定义，因为需要居中展示我们使用绝对定位position:absolute;其次因为是弹出层，div必须在最外围，所以通常把z-index设置的非常大，这里我们设置为z-index:9999;还有一点是关于div本身是隐藏的需要设置为display:none.

JS部分代码

$(document).ready(function(){ 
		jQuery.fn.extend({ 
		center:function(width,height){ 
			return $(this).css("left", ($(window).width()-width)/2+$(window).scrollLeft()). 
			css("top", ($(window).height()-height)/4+$(window).scrollTop()). 
			css("width",width). 
			css("height",height); 
			} 
		}); 
		
		
		jQuery.fn.extend({ 
			//拖拽功能 
			drag:function(){ 
				var $tar = $(this); 
				return $(this).mousedown(function(e){ 
					if(e.target.tagName =="H2"){ 
					var diffX = e.clientX - $tar.offset().left; 
					var diffY = e.clientY - $tar.offset().top; 
					$(document).mousemove(function(e){ 
					var left = e.clientX - diffX; 
					var top = e.clientY - diffY; 
					if (left < 0){ 
						left = 0; 
					} 
					else if (left <= $(window).scrollLeft()){ 
						left = $(window).scrollLeft(); 
					} 
					else if (left > $(window).width() +$(window).scrollLeft() - $tar.width()){ 
						left = $(window).width() +$(window).scrollLeft() -$tar.width(); 
					} 
					if (top < 0){ 
						top = 0; 
					} 
					else if (top <= $(window).scrollTop()){ 
						top = $(window).scrollTop(); 
					} 
					else if (top > $(window).height() +$(window).scrollTop() - $tar.height()){ 
						top = $(window).height() +$(window).scrollTop() - $tar.height(); 
					} 
						$tar.css("left",left + 'px').css("top",top + 'px'); 
				}); 
			} 
			$(document).mouseup(function(){ 
				$(this).unbind("mousemove"); 
				$(this).unbind("mouseup") 
				}); 
			}); 
		} 
	}); 
		$("#login").drag(); 
}); 
$(".login").click(function (){ 
		$("#login").show().center(350,250);//展现登陆框 
	}); 
$(".close").click(function(){
	$("#login").hide()
});

这段代码里增加了一个使弹出层居中的代码，便于当页面弹出展示位置，增加一些用户体验度，另外还有两个事件为点击登录按钮弹出登录框，点击关闭按钮关闭弹出框。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-12-20，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度