對一般的**而言，彈出框是比較常見的。或是給出使用者操作提示，或是通過彈出框開啟乙個小視窗以提示資訊，或是給出錯誤警示等等。但是由於瀏覽器自帶的彈出視窗alert , confirm , prompt
樣式比較單調，且不同瀏覽器有不同的預設樣式設定。所以在日常工作中，給**做乙個自定義的彈出框十分必要。
當然一般的彈出框製作起來也十分簡單，接下來我就相關細節做一說明。
html部分：
html部分由三部分組成，觸發彈出框按鈕
button ,
彈出框遮罩層
black,
彈出框盒子
dialog
包裹彈出框的所有內容。
寫html
結構時注意它們三部分都是平級關係。
關鍵環節是，需要給遮罩層，和彈出框盒子設定固定定位。遮罩層需要全屏覆蓋，所以寬高設定為100%
。在為觸發狀態他們都應該處於
display:none;
隱藏狀態。當觸發時直接顯示。
彈出框的一般效果是
當我們點選黑色透明區域或者x
時都需要將彈出框和遮罩層關閉。
以下是這個效果實現的js
**部分：
遮罩層back ,
彈出框盒子
dialogbox ,
彈出框盒子自己的關閉按鈕
dialogclose.
由於都會用到公共的
document,
這裡由doc
這個變數來代替。
獲取完了相關元素後，給對應的元素新增相應的點選事件已觸發相關行為。
btn點選時將開啟我們的盒子，遮罩層和彈出框盒子都應當顯示出來，修改他們的
display
屬性；彈出框被開啟後，點選dialogclose
或者 back(
其它黑色區域時
) 都需要將其關閉，修改他們的
display
屬性為none;
到這裡乙個基本的彈出框就製作完畢。
由於每乙個click
事件都是觸發相關元素的顯隱控制，可以考慮使用乙個公共方法，傳遞不同的引數來實現這個功能。
這裡我們寫了乙個公共方法 showhide
函式，接收的第乙個引數為顯隱閥門的布林值。其它引數為需要進行同時控制的元素。
這裡我們使用到函式自身的arguments
物件。arguments
裡面儲存了該函式傳遞進來的所有引數，這裡當作乙個陣列使用。
用乙個for
迴圈迭代
arguments
。引數的第一項是布林值，用來決定顯隱關係，所以
for迴圈
i的第乙個引數為
1.依次給其它各項設定
style
屬性。通過這種方法，**的復用性提高了很多。方便統一修改，引用。
彈出框外掛程式 dialog
基於jquery和dot.js彈出框外掛程式，相容ie6 等其他瀏覽器。思想 彈出框元素插入body節點中，並在頁面垂直居中顯示 fixed定位 觸發確定和關閉事件繫結。注意ie6包含兩個問題 一 select flash不能遮罩，採用iframe。二 fixed屬性採用滾動時重新計算高度或在樣式中...
dialog粗說 彈出對話方塊
dialog外掛程式dialog外掛程式 作用彈出對話方塊 首選載入css與js 首選載入jquery.js檔案 載入dialog.js檔案 載入dialog.css樣式 可以不用載入dialog.js檔案 var dialog function var center function var di...
js處理彈出框的例項dialog的用法
可以結合jquery ui 這個js來使用 div id reg style display none 表單區域 div script function idinfo id 取消 function position center 引數值可選的有 left top top right bottom l...