目前能夠簡單實現彈出層的框架實在是多，但個人還是覺得原生js**實現比較具有根本性。
、原始碼。
js**總體分為三個部分：獲取節點並新增點選事件；建立彈出層節點並設定樣式；新增滑鼠移動事件。重點是後面兩個部分。
html/css
首先還是附上html和css**，樣式寫的有些複雜，純屬個人強迫症犯了。。。需要注意的就是position和z-index兩個樣式。
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>彈出層效果
title
>
6<
style
>7*
8button
21#pop_up
30#box
34.content
45#close
54style
>
55head
>
56<
body
>
57<
button
id="clk"
button
>
58body
>
59html
彈出層效果
1//獲取頁面可視區高寬
2var owidth =document.documentelement.clientwidth;
3var oheight =document.documentelement.clientheight;45
//建立陰影背景節點
6var oparent = document.createelement('div');
7 oparent.id = 'pop_up';
8 oparent.style.width = owidth +'px';
9 oparent.style.height = oheight +'px';
1011
12//
建立彈出層節點
13var ochild = document.createelement('div');
14 ochild.id = "box";
15 ochild.innerhtml = "
";16
1718
//設定居中顯示
19var cwidth =ochild.offsetwidth;
20var cheight =ochild.offsetheight;
21 ochild.style.left=owidth/2-cwidth/2+"px";
22 ochild.style.top=oheight/2-cheight/2+"px";
2324
//關閉彈出層
25var close = document.getelementbyid('close');
26 close.onclick = function
();
如果底層頁面高度超過可視區高度，應該獲取網頁正文全文高——document.body.scrollheight，這裡不再展開。
這裡彈出層的思想就是進入時建立節點，包括陰影背景以及彈出框兩部分，關閉時再移除建立的節點。
彈出框拖拽效果
1//移動彈出框
2var move = false;3
var _x, _y; //
記錄滑鼠相對彈出框的left、top
4var x, y; //
記錄彈出框相對頁面的left、top，以便判斷
5 ochild.onmousedown = function
(e);
10 ochild.onmousemove = function
(e)21
};22 ochild.onmouseup = function
() ;
25 ochild.onmouseout = function
() ;
需要注意的是這裡設定了允許移動標誌move；還有彈出框的定位與滑鼠座標的計算關係；另外將彈出框限制在頁面區域內。
EasyUI效果 彈出頁面效果
easyui 效果 右擊選單 接下來寫一下彈出頁面效果。這個效果就是，我寫乙個正常的頁面，然後在另乙個頁面寫上事件，將這個頁面整個作為彈出頁面進行彈出 這個做的原因是 這個正常的頁面即可以作為正常頁面存在 也可以通過方法彈出顯示 而不用跳轉過去 算是方便檢視吧.首先 setstudentno jsp...
基於jQuery彈出層的9種效果
示例1 預設彈出層,只須傳入觸發元素 彈出層 關閉按鈕的jquery物件或 id，其中關閉按鈕為可選項。new popuplayer 示例2 引數offsets可設定彈出層位置偏移量，讓彈出層的位置隨心所欲 new popuplayer 示例3 usefx設定為true即可使用彈出層預設特效 new...
jquery效果 視窗彈出案例
效果 基本效果 show hide toggle 滑動 slidedown slideup slidetoggle 劃上 p slideup slow 劃下 p slidedown slow p slidetoggle slow 用600毫秒緩慢的將段落滑上或滑下 淡入淡出 fadein fadeo...