html怎么设置弹层位置,HTML可拖动自定义弹出层

2016-12-20 10:15:43

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

HTML部分代码

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

login

网站登录

帐 号：

密 码：

注册新用户 | 忘记密码？

页面部分为有一个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()

});

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