本文章是利用了jquery dialog對話方塊外掛程式例項彈層效果哦，dialog彈出乙個iframe對話方塊，好了下面我們先來看看例項，然後再告訴你如何例項dialog對話方塊效果。
(function ($) ,
show: "explode",
hide: "highlight",
title: "提示",
url: "/test.asp教程x",
close: function ()
}; if (options)
');
// dialog
$('#' + settings.id).dialog(,
resizestop: function ()
});$('#' + settings.id).dialog("open");
return this;
}; })(jquery);
下面來看看
原理很簡單，通過js動態構建乙個div層，將其插入到body中，然後通過調整position的css屬性為absolute或fixed，使其脫離原來的文件流的位置。再通過適當的加工美化就成了。
標題[關閉]
內容部分
這就是兩個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;
var top = ($(window).height() - dialog.height()) / 2;
dialog.css();
ie6下並沒有fixed模式，但是能通過window.onscroll事件模擬實現：
// top 對話方塊到可視區域頂部位置的距離。
var top = parseint(dialog.css('top')) - $(document).scrolltop();
var left = parseint(dialog.css('left')) - $(document).scrollleft();
$(window).scroll(function());
});
jQuery dialog對話方塊
基本的dialog 這是乙個預設的對話方塊，用於顯示資訊。對話方塊視窗可以移動，調整尺寸，預設可通過 x 圖示關閉。為dialog開啟和關閉加上特效動畫 effect clip 可取值blind,clip,drop,explode,fold,puff,slide,scale,size,pulsate...
jQuery Dialog對話方塊事件
dialog對話方塊事件 對話方塊應用場景 對話方塊是最常用 最實用的功能。1 靜態提示類對話方塊，對話方塊的內容是固定的 2 動態提示類對話方塊，對話方塊內容是根據事件源變化的 3 遮罩類對話方塊，對話方塊彈出時背景變灰並且不可選 使用jquery ui的dialog 元件可以輕鬆實現上面三種效果...
jQuery Dialog 彈出層對話方塊外掛程式
網上這種外掛程式很多，但是沒乙個合適的，大部分都做得很大，功能齊全。於是自己做了這個小外掛程式，順便學習下jquery外掛程式的寫法。具體的演示程式在這裡 演示程式。原理很簡單，通過js動態構建乙個div層，將其插入到body中，然後通過調整position的css屬性為absolute或fixed...