快捷導(dǎo)航

HTML頁面彈出居中可拖拽的自定義窗口層

更新時間：2014年05月07日 09:53:45 作者：

這篇文章主要介紹了HTML頁面如何彈出居中可拖拽的自定義窗口層,需要的朋友可以參考下

使用DIV彈出窗口來動態(tài)顯示內(nèi)容的原理：首先采用CSS和HTML隱藏彈窗中的內(nèi)容，然后利用JavaScript（本教程中是JQuery）來動態(tài)顯示它們。這種效果不僅能夠充分利用有限的版面空間，而且能夠提高用戶體驗；更重要的是，它并不影響SEO效果（因為它實際存在于頁面中，只是初始為不可見狀態(tài)）

1、在html頁面中定義一個div，并在div實現(xiàn)我們需要展示的內(nèi)容。

復(fù)制代碼代碼如下:

 
<body> 
<div id="login"> 
<h2><img src="images/close.png" alt="" class="close" />網(wǎng)站登錄</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> 
</body> 

一圖抵千言。讓我們看看這個DIV彈出窗口的效果截圖：

2、我所用的CSS樣式

復(fù)制代碼代碼如下:

 
#login { 
width:350px; 
height:250px; 
border:1px solid #ccc; 
position:absolute; 
display:block; 
z-index:9999; 
background:#fff; 
} 
#login h2 { 
height:40px; 
line-height:40px; 
text-align:center; 
font-size:14px; 
letter-spacing:1px; 
color:#666; 
background:url(images/login_header.png) repeat-x; 
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; 
background:url(images/login_button.png) no-repeat; 
border:none; 
cursor:pointer; 
} 
#login .other { 
text-align:right; 
padding:15px 10px; 
color:#666; 
} 

這里面主要注意的是關(guān)于div樣式的定義，因為需要居中展示我們使用絕對定位position:absolute;其次因為是彈出層，div必須在最外圍，所以通常把z-index設(shè)置的非常大，這里我們設(shè)置為z-index:9999;還有一點是關(guān)于div本身是隱藏的需要設(shè)置為display:none,但這里我們需要直接看效果所以直接讓它展現(xiàn)使用display:block;

3、我們需要讓它居中展示，那么首先就必須獲取瀏覽器的高度和寬度，如果有滾動條的水平或者豎向偏移，還需要獲取那個長度，通過計算獲取div應(yīng)該瀏覽器的位置。

復(fù)制代碼代碼如下:

 
$(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)/2+$(window).scrollTop()). 
css("width",width). 
css("height",height); 
} 
}); 
}); 

通過點擊按鈕讓它展現(xiàn)

復(fù)制代碼代碼如下:

 
$(".login").click(function () 
{ 
$("#login").show().center(350,250);//展現(xiàn)登陸框 
}); 

效果圖

4、能對彈出框進(jìn)行拖拽

代碼實現(xiàn)

復(fù)制代碼代碼如下:

 
$(document).ready(function() 
{ 
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") 
}); 
}); 
} 
}); 

}); 

這里我們只針對div內(nèi)容中的H2元素可供點擊拖拽，如果需要全局div可進(jìn)行修改，拖拽原理：當(dāng)鼠標(biāo)在指定元素上的按下時，獲取該鼠標(biāo)點坐標(biāo)，通過計算，把圖片也移動到相對應(yīng)的位置，一旦鼠標(biāo)點擊取消，相對應(yīng)的按下事件也隨之取消，頁面靜止。

調(diào)用拖拽方法

復(fù)制代碼代碼如下:

$("#login").drag();

現(xiàn)在我們可以點擊彈出框的標(biāo)題欄隨意對其在瀏覽器中拖拽了。