網頁制作教程:彈出層詳解

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁制作教程:彈出層詳解

網頁制作教程:彈出層詳解

編輯：CSS進階教程

破洛洛文章簡介：原理很簡單.有兩種實現途徑:一種是通過元素創建和刪除，一種是通過顯示和隱藏，其余的具體要做成什麼樣子，就留給CSS來控制了。

實例：CSS+JS彈出層效果,兼容所有浏覽器http://www.poluoluo.com/jzxy/201009/93884.html

在工作過程中經常遇到做彈出的層效果，有的需要在元素右下彈出，有的需要彈出在浏覽器正中間，有的需要彈出後再拖拽，有的需要背景要變暗，有的需要彈出的層跟隨鼠標移動……

網上此類效果其實很多，有javascript原生的，有基於框架寫的,但自己好多時候用不到那麼高級的效果，所以就把這些功能都分開來一步一步實現。

其實原理很簡單.有兩種實現途徑:一種是通過元素創建和刪除，一種是通過顯示和隱藏，其余的具體要做成什麼樣子，就留給CSS來控制了。下面從最簡單的開始（不基於框架）

一、最簡單的彈出

用到的javascript代碼如下：

function show(){
 var oShow = document.getElementById('show');
 oShow.style.display = 'block';
 var oClose = document.createElement("span");
  oClose.innerHTML = "×";
  oShow.appendChild(oClose);
  oClose.onclick = function(){
   oShow.style.display = 'none';
   oShow.removeChild(this);
  }
      }

點擊下面“運行”直接查看效果

二、彈出層—到浏覽器中央

用到的javascript代碼如下：

function show(){
 var iWidth = document.documentElement.clientWidth; //獲取浏覽器寬度
 var iHeight = document.documentElement.clientHeight; //獲取浏覽器高度
 
 var oShow = document.getElementById('show');
  oShow.style.display = 'block';
        oShow.style.left = (iWidth-302)/2+"px"; //居中橫坐標
  oShow.style.top = (iHeight-202)/2+"px"; //居中縱坐標
 var oClose = document.createElement("span");
  oClose.innerHTML = "×";
  oShow.appendChild(oClose);
  oClose.onclick = function(){
   oShow.style.display = 'none';
   oShow.removeChild(this);
  }
      }

點擊下面“運行”直接查看效果

三、彈出層—到浏覽器中央—背景變暗

用到的javascript代碼如下：

function show(){
 var iWidth = document.documentElement.clientWidth;
 var iHeight = document.documentElement.clientHeight;
 
 var bgObj = document.createElement("div"); //創建背景層
 bgObj.setAttribute("id","bgbox");
 bgObj.style.width = iWidth+"px";
 bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px";
 document.body.appendChild(bgObj);  //將創建的層插入body中
 
 var oShow = document.getElementById('show');
  oShow.style.display = 'block';
  oShow.style.left = (iWidth-302)/2+"px";
  oShow.style.top = (iHeight-202)/2+"px";
 
 var oClosebtn = document.createElement("span");
  oClosebtn.innerHTML = "×";
  oShow.appendChild(oClosebtn);
 
 function oClose(){
  oShow.style.display = 'none';
  oShow.removeChild(oClosebtn);
  document.body.removeChild(bgObj);  
 }
 
 oClosebtn.onclick = oClose;
 bgObj.onclick = oClose;
      }

點擊下面“運行”直接查看效果

四、彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出

鍵盤事件的javascript代碼如下：

function getEvent(){
 return window.event || arguments.callee.caller.arguments[0];
 // 獲得事件Event對象，用於兼容IE和FireFox
}
 
document.onkeyup = function(){
 var event = getEvent();
 if (event.keyCode == 27){
  oClose();
 }
      }

點擊下面“運行”直接查看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="前端思考" /> <meta name="keywords" content="前端思考" /> <title>彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出：前端思考</title> <style> *{margin:0;padding:0px;} body{padding:30px;} #show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;} #show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;} #show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;} #show p{padding:5px;} #text{font-size:12px;text-indent:2em;line-height:20px;} #bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10} </style> <script type="text/javascript"> function show(){ var iWidth = document.documentElement.clientWidth; var iHeight = document.documentElement.clientHeight; var bgObj = document.createElement("div"); bgObj.setAttribute("id","bgbox"); bgObj.style.width = iWidth+"px"; bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px"; document.body.appendChild(bgObj); var oShow = document.getElementById('show'); oShow.style.display = 'block'; oShow.style.left = (iWidth-302)/2+"px"; oShow.style.top = (iHeight-202)/2+"px"; var oClosebtn = document.createElement("span"); oClosebtn.innerHTML = "×"; oShow.appendChild(oClosebtn); function oClose(){ oShow.style.display = 'none'; oShow.removeChild(oClosebtn); document.body.removeChild(bgObj); } oClosebtn.onclick = oClose; bgObj.onclick = oClose; function getEvent() { return window.event || arguments.callee.caller.arguments[0]; } document.onkeyup = function(){ var event = getEvent(); if (event.keyCode == 27){ oClose(); } } } </script> </head> <body> <a onclick="show(); return false" href="#">請猛擊我（彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出）</a> <div id="show"> <h3>彈出層標題欄</h3> <p id="text"> 這裡是彈出層內容，內容可以是文字、圖片等，可以是iframe傳進來，也可以用jQuery的load()傳進來。如有什麼不合理的或可以改進的，大家可以給我留言，共同學習。 </p> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

四、彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出—支持鼠標拖動

鼠標拖動的javascript代碼如下：

var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar =  document.getElementById('titlebar');
titleBar.onmousedown = function() {
 var evt = getEvent();
 moveable = true; 
 moveX = evt.clientX;
 moveY = evt.clientY;
 moveTop = parseInt(oShow.style.top);
 moveLeft = parseInt(oShow.style.left);
 
 document.onmousemove = function() {
  if (moveable) {
   var evt = getEvent();
   var x = moveLeft + evt.clientX - moveX;
   var y = moveTop + evt.clientY - moveY;
   if ( x > 0 &&( x + 302 < iWidth) && y > 0 && (y + 202 < iHeight) ) {
    oShow.style.left = x + "px";
    oShow.style.top = y + "px";
   }
  } 
 };
 document.onmouseup = function () { 
  if (moveable) { 
   document.onmousemove = docMouseMoveEvent;
   document.onmouseup = docMouseUpEvent;
   moveable = false; 
   moveX = 0;
   moveY = 0;
   moveTop = 0;
   moveLeft = 0;
  } 
 };
      }

點擊下面“運行”直接查看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="前端思考" /> <meta name="keywords" content="前端思考" /> <title>五、彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出—支持鼠標拖動：前端思考</title> <style> *{margin:0;padding:0px;} body{padding:30px;} #show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;} #show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;cursor:move} #show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;} #show p{padding:5px;} #text{font-size:12px;text-indent:2em;line-height:20px;} #bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10} </style> <script type="text/javascript"> function show(){ var iWidth = document.documentElement.clientWidth; var iHeight = document.documentElement.clientHeight; var bgObj = document.createElement("div"); bgObj.setAttribute("id","bgbox"); bgObj.style.width = iWidth+"px"; bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px"; document.body.appendChild(bgObj); var oShow = document.getElementById('show'); oShow.style.display = 'block'; oShow.style.left = (iWidth-302)/2+"px"; oShow.style.top = (iHeight-202)/2+"px"; var oClosebtn = document.createElement("span"); oClosebtn.innerHTML = "×"; oShow.appendChild(oClosebtn); function oClose(){ oShow.style.display = 'none'; document.body.removeChild(bgObj); oShow.removeChild(oClosebtn); } oClosebtn.onclick = oClose; bgObj.onclick = oClose; function getEvent() { return window.event || arguments.callee.caller.arguments[0]; } document.onkeyup = function(){ var event = getEvent(); if (event.keyCode == 27){ oClose(); } } var moveX = 0; var moveY = 0; var moveTop = 0; var moveLeft = 0; var moveable = false; var docMouseMoveEvent = document.onmousemove; var docMouseUpEvent = document.onmouseup; titleBar = document.getElementById('titlebar'); titleBar.onmousedown = function() { var evt = getEvent(); moveable = true; moveX = evt.clientX; moveY = evt.clientY; moveTop = parseInt(oShow.style.top); moveLeft = parseInt(oShow.style.left); document.onmousemove = function() { if (moveable) { var evt = getEvent(); var x = moveLeft + evt.clientX - moveX; var y = moveTop + evt.clientY - moveY; if ( x > 0 &&( x + 302 < iWidth) && y > 0 && (y + 202 < iHeight) ) { oShow.style.left = x + "px"; oShow.style.top = y + "px"; } } }; document.onmouseup = function () { if (moveable) { document.onmousemove = docMouseMoveEvent; document.onmouseup = docMouseUpEvent; moveable = false; moveX = 0; moveY = 0; moveTop = 0; moveLeft = 0; } }; } } </script> </head> <body> <a onclick="show(); return false" href="#">請猛擊我（彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出—支持鼠標拖動）</a> <div id="show"> <h3 id="titlebar">彈出層標題欄</h3> <p id="text"> 這裡是彈出層內容，內容可以是文字、圖片等，可以是iframe傳進來，也可以用jQuery的load()傳進來。如有什麼不合理的或可以改進的，大家可以給我留言，共同學習。 </p> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

歡迎大家多提改進意見或建議，共同學習和探討