下面小編就為大家?guī)?lái)一篇深入理解jQuery中的事件冒泡。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

最近在研究彈出層插件時(shí)發(fā)現(xiàn)網(wǎng)上很多插件功能很強(qiáng)大，同時(shí)插件也很龐大。在這里個(gè)人寫了一個(gè)比較秀珍的彈出層插件。

jquery.popdialog.js

$(function () {

$.fn.PopDialog = function (options) {

var defaults = {

Event: "click", //觸發(fā)響應(yīng)事件

title: "title", //彈出層的標(biāo)題

type: "text", //彈出層類型(text、容器ID、URL、Iframe)

content: "content", //彈出層的內(nèi)容(text文本、容器ID名稱、URL地址、Iframe的地址)

width: 500, //彈出層的寬度

height: 400, //彈出層的高度

scrollTop: 200, //層滑動(dòng)的高度也就是彈出層時(shí)離頂部滑動(dòng)的距離

isAuto: false, //是否自動(dòng)彈出

time: 2000, //設(shè)置自動(dòng)彈出層時(shí)間，前提是isAuto=true

isClose: false, //是否自動(dòng)關(guān)閉 

timeOut: 2000 //設(shè)置自動(dòng)關(guān)閉時(shí)間，前提是isClose=true

};

var options = $.extend(defaults, options);

$("body").prepend("<div id='floatBoxBg'></div><div id='floatBox' class='floatBox'><div class='title'><h4></h4><span id='closeDialog'>X</span></div><div class='content'></div></div>");

var $this = $(this); //當(dāng)然響應(yīng)事件對(duì)象

var $blank = $("#floatBoxBg"); //遮罩層對(duì)象

var $title = $("#floatBox .title h4"); //彈出層標(biāo)題對(duì)象

var $content = $("#floatBox .content"); //彈出層內(nèi)容對(duì)象

var $dialog = $("#floatBox"); //彈出層對(duì)象

var $close = $("#closeDialog"); //關(guān)閉層按鈕對(duì)象

var stc, st;

if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判斷IE6

$blank.css({ height: $(document).height(), width: $(document).width() });

}

$close.live("click", function () {

$blank.animate({ opacity: "0" }, "normal", function () { $(this).hide(); });

$dialog.animate({ top: ($(document).scrollTop() - parseInt(options.height)) + "px" }, "normal", function () { $(this).hide(); });

if (st) {

clearTimeout(st); //清除定時(shí)器

}

if (stc) {

clearTimeout(stc); //清除定時(shí)器

}

});

$content.css("height", parseInt(options.height) - 70);

//文本框綁定事件

$this.live(options.Event, function (e) {

$title.html(options.title);

switch (options.type) {

case "url": //當(dāng)類型是地址的時(shí)候 

$content.ajaxStart(function () {

$(this).html("loading...");

});

$.get(options.content, function (html) {

$content.html(html);

});

break;

case "text": //當(dāng)類型是文本的時(shí)候

$content.html(options.content);

break;

case "id": //當(dāng)類型是容器ID的時(shí)候

$content.html($("#" + options.content + "").html());

break;

case "iframe": //當(dāng)類型是Iframe的時(shí)候

$content.html("<iframe src=\"" + options.content + "\" width=\"100%\" height=\"" + (parseInt(options.height) - 70) + "px" + "\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");

break;

default: //默認(rèn)情況下的時(shí)候

$content.html(options.content);

break;

}

$blank.show();

$blank.animate({ opacity: "0.5" }, "normal");

$dialog.css({ display: "block", left: (($(document).width()) / 2 - (parseInt(options.width) / 2)) + "px", top: ($(document).scrollTop() - parseInt(options.height)) + "px", width: options.width, height: options.height });

$dialog.animate({ top: options.scrollTop + "px" }, "normal");

if (options.isClose) {

stc = setTimeout(function () {

$close.trigger("click");

clearTimeout(stc);

}, options.timeOut);

}

});

if (options.isAuto) {

st = setTimeout(function () {

$this.trigger(options.Event);

clearTimeout(st);

}, options.time);

}

}

});

配套的css：

*

{

padding: 0;

margin: 0;

}

#floatBoxBg

{

display: none;

width: 100%;

height: 100%;

background: #000;

position: fixed !important; /*ie7 ff*/

position: absolute;

top: 0;

left: 0;

filter: alpha(opacity=0);

opacity: 0;

}

.floatBox

{

border: #9CC95F 5px solid;

position: fixed !important; /*ie7 ff*/

position: absolute;

top: 50px;

left: 40%;

background: #fff;

display: none;

}

.floatBox .title

{

height: 23px;

padding: 7px 10px 0;

color: #fff;

background-attachment: scroll;

background: #9CC95F;

background-repeat: repeat-x;

background-position: 0px 0px;

}

.floatBox .title h4

{

float: left;

padding: 0;

margin: 0;

font-size: 14px;

line-height: 16px;

}

.floatBox .title span

{

float: right;

cursor: pointer;

}

.floatBox .content

{

padding: 20px 15px;

background: #fff;

overflow-x: hidden;

overflow-y: auto;

}

#closeDialog

{

font-size: 20px;

font-weight: bold;

color: #000;

margin-top: -5px;

}

#closeDialog:hover

{

font-size: 20px;

font-weight: bold;

color: #fff;

margin-top: -5px;

}

最終的html示例：

<!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>

<title></title>

<script type="text/javascript" src="../js/jquery-1.7.min.js"></script>

<script type="text/javascript" src="jquery.popdialog.js"></script>

<link type="text/css" rel="stylesheet" href="popdialog.css" />

</head>

<body>

<div id="test">彈出層插件測(cè)試</div>

<div id="detail" style="display: none;">

歡迎各位網(wǎng)友使用彈出層插件demo

</div>

<script type="text/javascript">

$(function () {

$("#test").PopDialog({

Event: "click", //觸發(fā)響應(yīng)事件

title: "彈出層插件", //彈出層的標(biāo)題

type: "id", //彈出層類型(text、容器ID、URL、Iframe)

content: "detail", //彈出層的內(nèi)容獲取(text文本、容器ID名稱、URL地址、Iframe的地址)

width: 500, //彈出層的寬度

height: 300, //彈出層的高度 

scrollTop: 200, //層滑動(dòng)的高度也就是彈出層時(shí)離頂部滑動(dòng)的距離

isAuto: true, //是否自動(dòng)彈出

time: 2000, //設(shè)置彈出層時(shí)間，前提是isAuto=true

isClose: false, //是否自動(dòng)關(guān)閉 

timeOut: 5000 //設(shè)置自動(dòng)關(guān)閉時(shí)間，前提是isClose=true 

});

});

</script>

</body>

</html>

以上所述是小編給大家介紹的jQuery 彈出層插件(推薦)的相關(guān)知識(shí)，希望對(duì)大家有所幫助