Ⅰ 那位大俠有那種滑鼠點擊彈出一個框的js如圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一個簡單的網頁彈出層</title>
<style>
*
body
#container div
#select_city h3
#main_city,#all_province
#main_city div,#all_province div
#main_city h4,#all_province h4
#main_city div span,#all_province div span
#float_lay
</style>
<script type="text/javascript">
//彈出層
function openLayer(objId,conId){
var arrayPageSize = getPageSize();//調用getPageSize()函數
var arrayPageScroll = getPageScroll();//調用getPageScroll()函數
if (!document.getElementById("popupAddr")){
//創建彈出內容層
var popupDiv = document.createElement("div");
//給這個元素設置屬性與樣式
popupDiv.setAttribute("id","popupAddr")
popupDiv.style.position = "absolute";
popupDiv.style.border = "1px solid #ccc";
popupDiv.style.background = "#fff";
popupDiv.style.zIndex = 99;
//創建彈出背景層
var bodyBack = document.createElement("div");
bodyBack.setAttribute("id","bodybg")
bodyBack.style.position = "absolute";
bodyBack.style.width = "100%";
bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
bodyBack.style.zIndex = 98;
bodyBack.style.top = 0;
bodyBack.style.left = 0;
bodyBack.style.filter = "alpha(opacity=50)";
bodyBack.style.opacity = 0.5;
bodyBack.style.background = "#ddf";
//實現彈出(插入到目標元素之後)
var mybody = document.getElementById(objId);
insertAfter(popupDiv,mybody);//執行函數insertAfter()
insertAfter(bodyBack,mybody);//執行函數insertAfter()
}
//顯示背景層
document.getElementById("bodybg").style.display = "";
//顯示內容層
var popObj=document.getElementById("popupAddr")
popObj.innerHTML = document.getElementById(conId).innerHTML;
popObj.style.display = "";
//讓彈出層在頁面中垂直左右居中(統一)
// popObj.style.width = "600px";
// popObj.style.height = "400px";
// popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';
// popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 + 'px';
//讓彈出層在頁面中垂直左右居中(個性)
var arrayConSize=getConSize(conId)
popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2-50 + 'px';
popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 -30 + 'px';
}
//獲取內容層內容原始尺寸
function getConSize(conId){
var conObj=document.getElementById(conId)
conObj.style.position = "absolute";
conObj.style.left=-1000+"px";
conObj.style.display="";
var arrayConSize=[conObj.offsetWidth,conObj.offsetHeight]
conObj.style.display="none";
return arrayConSize;
}
function insertAfter(newElement,targetElement){//插入
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//獲取滾動條的高度
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}
//獲取頁面實際大小
function getPageSize(){
var xScroll,yScroll;
if (window.innerHeight && window.scrollMaxY){
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
sScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth,windowHeight;
//var pageHeight,pageWidth;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
var pageWidth,pageHeight
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//關閉彈出層
function closeLayer(){
document.getElementById("popupAddr").style.display = "none";
document.getElementById("bodybg").style.display = "none";
return false;
}
</script>
<script type="text/javascript">
//
//對「拖動點」定義：onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可
var move=false,oldcolor,_X,_Y;
function StartDrag(obj){ //定義准備拖拽的函數
obj.setCapture(); //對當前對象的滑鼠動作進行跟蹤
oldcolor=obj.style.backgroundColor;
obj.style.background="#999";
move=true;
//獲取滑鼠相對內容層坐標
var parentwin=document.getElementById("popupAddr");
_X=parentwin.offsetLeft-event.clientX
_Y=parentwin.offsetTop-event.clientY
}
function Drag(obj){ //定義拖拽函數
if(move){
var parentwin=document.getElementById("popupAddr");
parentwin.style.left=event.clientX+_X;
parentwin.style.top=event.clientY+_Y;
}
}
function StopDrag(obj){ //定義停止拖拽函數
obj.style.background=oldcolor;
obj.releaseCapture(); //停止對當前對象的滑鼠跟蹤
move=false;
}
</script>
</head>
<body>
<input name="Input" id="test" value="點擊彈出層" type="button" onclick="openLayer('test','test_con')" />
<div id="test_con" style="display:none">
<div id="tab" style="padding:8px;">
<div id="tabtop">
<div id="tabtop-L"><strong>層的標題在這里</strong></div>
<div id="tabtop-R" onclick="closeLayer()"><strong>[關閉層]</strong></div>
</div>
<div id="tabcontent">源碼愛好者（CoreFans.net）提供各類編程源碼、書籍教程下載。</div>
</div>
</div>
<br>
<br>
<input name="Input" id="test3" value="可拖動層" type="button" onclick="openLayer('test3','test_con3')" />
<div id="test_con3" style="display:">
<div id="tab3" style="width:360px;height:200px;background:#fee;">
<div id="tabtop3">
<div id="tabtop-L3" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"><strong style="color:red;font-size:20px">可拖動層的標題</strong></div>
<div id="tabtop-R3" onclick="closeLayer()"><strong>[關閉層]</strong></div>
</div>
<div id="tabcontent3" style="padding:8px">歡迎來到源碼愛好者</div>
</div>
</div>
</body>
</html>
Ⅱ js怎麼實現點一個按鈕彈出一個層
序說明：
要實現一個簡單的LightBox效果，主要有兩個部分：覆蓋層和高亮層。
【跨瀏覽器的固定定位】
首先要先說說這個東西position:fixed，它的作用是跨瀏覽器的固定定位。
摘自詳解定位與定位應用：
「如讓一個元素可能隨著網頁的滾動而不斷改變自己在瀏覽器的位置。而現在我可以通過CSS中的一個定位屬性來實現這樣的一個效果，這個元素屬性就是曾經不被支持的position:fixed; 他的含義就是：固定定位。這個固定與絕對定位很像，唯一不同的是絕對定位是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。」
程序中很多地方利用了這個css，ie7、ff都支持這個css，但ie6不支持，程序中只能是在ie6模擬這個效果。
【覆蓋層】
覆蓋層的作用是把焦點限制在高亮層上，原理是通過一個絕對定位的層（通常使用div），設置它的寬度和高度以致能覆蓋整個屏幕（包括縮放和滾動瀏覽器的情況下），再給它設置一個比較高的zIndex來層疊在原有內容之上（但要比高亮層小），這樣用戶就只能點到這個層之上的內容了。
Ⅲ 點擊js彈出div層，當滑鼠移出div層窗口後任意點擊關閉div層窗口！大蝦們應該怎麼實現啊啊啊
div對象.onclick=function(ev){ev = ev || window.event; ev.cancelBubble = true;}
document.documentElement.onclick=function(ev){這里寫關閉div的代碼}
不懂再問我