jQuery Dialog 彈出層對話方塊外掛程式

網上這種外掛程式很多，但是沒乙個合適的，大部分都做得很大，功能齊全。於是自己做了這個小外掛程式，順便學習下jquery外掛程式的寫法。

具體的演示程式在這裡：演示程式。

原理很簡單，通過js動態構建乙個div層，將其插入到body中，然後通過調整position的css屬性為absolute或fixed，使其脫離原來的文件流的位置。再通過適當的加工美化就成了。


class
="dialog-overlay"
>
class
="dialog"
>
class
="bar"
>
class
="title"
>
標題class
="close"
>
[關閉]
class
="content"
>
內容部分

這就是兩個div層的結構，第乙個背景遮蓋層只有在需要的時候才建立。每個div都定義了乙個css類，這樣便於自定義其外觀。

移動框體

只要在mousemove事件中，計算兩次移動滑鼠位置的差值，再加上被移動框的原始的top,left，就是對話方塊新的位置。mousemove事件只需要在滑鼠按下標題欄的時候才需要觸發，所以只有在觸發標題欄的mousedown事件時才繫結mousemove事件，而滑鼠釋放時也同時解除mousemove的繫結。

mousemove和解除繫結mousemove事件的mouseup卻沒有繫結到標題欄上，而是document上，之所以這樣，是因為有時滑鼠移動過快時，會移出標題欄範圍，此時若是繫結到標題欄上的事件就會失效，而繫結到document就不會。

var
mouse
=;function
movedialog
(event));
mouse.x 
=e.clientx
;mouse.y 
=e.clienty;};
dialog
.find
('.bar'
).mousedown
(function
(event
));$
(document
).mouseup
(function
(event
));

定位

居中定位很容易實現，ie下的clientwidth, offsetwidth等一系列屬性和其它瀏覽器好像有點不一樣，所以不要用這些屬性，可以直接用jquery下的width()函式：

var
left =(
$(window
).width()-
dialog
.width
())/2;
vartop =(
$(window
).height()-
dialog
.height
())/2;
dialog
.css
();

ie6下並沒有fixed模式，但是能通過window.onscroll事件模擬實現：

// top 對話方塊到可視區域頂部位置的距離。
vartop 
=parseint
(dialog
.css
('top'))-
$(document
).scrolltop
();var
left 
=parseint
(dialog
.css
('left'))-
$(document
).scrollleft
();$
(window
).scroll
(function
());
});

z-index

為了能實現多個對話方塊並存，採用了乙個靜態的zindex變數，每次建立新對話方塊時，都實現一次自增操作，並將新值賦值給新建立的對話方塊的z-index，這樣就能保證最後建立的對話方塊總在最前面。

外掛程式通過以下的方式呼叫：

var
dlg 
=new
dialog
(content
,options
);dlg
.show
();

當然如果只是一般的使用，可以更簡單一些：

new
dialog
(content
,options
).show
();// 或是
dialog
(content
,options
);

還可以通過以下四個函式，對外掛程式進行進一步的控制：

建構函式的引數

建構函式有兩個引數。content和options。content表示對話方塊的內容；options表示對話方塊的各個配置選項。

content可以是乙個字串，表示顯示的內容。或是乙個object型別，若是object型別，則需要包含以下兩個屬性：type和value。type表示資料型別，而value則是type對應的內容。type接受以下幾種型別：

options則是對dialog行為和外觀的具體設定：

選項名稱

描述預設值

title

標題欄的文字

標題closetext

關閉按鈕文字

[關閉]

showtitle

是否顯示標題欄，若為否，則標題和關閉按鈕都將不顯示。

true

draggable

是否可以拖動框體。

true

modal

模態對話方塊，若為是，則不可操作背景層。

true

center

是否居中顯示，若為否，則通過css中的內容進行定位。

true

fixed

對話方塊是否跟隨滾動條移動。

true

time

自動關閉對話方塊時間，單位毫秒，若為0，表示不會自動關閉。0id

對話方塊的id。若為false，則表示自動產生。

false

**函式

名稱描述

返回值型別

beforeshow

在顯示之前呼叫，若返回false，則不顯示對話方塊。

bool

aftershow

顯示之後呼叫。

無beforehide

在隱藏之前呼叫，若返回false，則不隱藏對話方塊。

bool

afterhide

隱藏之後呼叫。

無beforeclose

在關閉之前呼叫，若返回false，則不關閉對話方塊。

bool

afterclose

關閉之後呼叫。

無外掛程式為對話方塊的每乙個部分都提供了乙個css類名，很容易實現css的自定義：

類名描述

.dialog-overlay

模態對話方塊時，的背景遮蓋層。

.dialog

對話方塊的css。

.dialog .bar

標題欄的css。包含了標題和關閉按鈕。

.dialog .bar .title

標題欄的標題部分。

.dialog .bar .close

標題欄的關閉按鈕部分。

.dialog .content

內容部分。

你可以直接修改這些css類，進行全域性的修改，也可以通過id加類名的方式修改某乙個對話方塊。

/* 只修改id為#dialog的對話方塊。 */

#dialog1 .bar

// 通過id屬性指定對話方塊的id。
newdialog
('text'
,);

具體的演示程式在這裡：演示程式。

jQuery Dialog 彈出層對話方塊外掛程式

JQuery Dialog 彈出視窗，遮蔽視窗

製作彈出層

layer關閉彈出層，彈出列印

jQuery Dialog 彈出層對話方塊外掛程式

JQuery Dialog 彈出視窗，遮蔽視窗

製作彈出層

layer關閉彈出層，彈出列印

相關推薦