html 弹出层插件,jQuery 弹出层插件(推荐)

最近在研究弹出层插件时发现网上很多插件功能很强大，同时插件也很庞大。在这里个人写了一个比较秀珍的弹出层插件。

jquery.popdialog.js

$(function () {

$.fn.PopDialog = function (options) {

var defaults = {

Event: "click", //触发响应事件

title: "title", //弹出层的标题

type: "text", //弹出层类型(text、容器ID、URL、Iframe)

content: "content", //弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址)

width: 500, //弹出层的宽度

height: 400, //弹出层的高度

scrollTop: 200, //层滑动的高度也就是弹出层时离顶部滑动的距离

isAuto: false, //是否自动弹出

time: 2000, //设置自动弹出层时间，前提是isAuto=true

isClose: false, //是否自动关闭

timeOut: 2000 //设置自动关闭时间，前提是isClose=true

};

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

$("body").prepend("

X

");

var $this = $(this); //当然响应事件对象

var $blank = $("#floatBoxBg"); //遮罩层对象

var $title = $("#floatBox .title h4"); //弹出层标题对象

var $content = $("#floatBox .content"); //弹出层内容对象

var $dialog = $("#floatBox"); //弹出层对象

var $close = $("#closeDialog"); //关闭层按钮对象

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); //清除定时器

}

if (stc) {

clearTimeout(stc); //清除定时器

}

});

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

//文本框绑定事件

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

$title.html(options.title);

switch (options.type) {

case "url": //当类型是地址的时候

$content.ajaxStart(function () {

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

});

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

$content.html(html);

});

break;

case "text": //当类型是文本的时候

$content.html(options.content);

break;

case "id": //当类型是容器ID的时候

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

break;

case "iframe": //当类型是Iframe的时候

$content.html("");

break;

default: //默认情况下的时候

$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示例：

弹出层插件测试

欢迎各位网友使用弹出层插件demo

$(function () {

$("#test").PopDialog({

Event: "click", //触发响应事件

title: "弹出层插件", //弹出层的标题

type: "id", //弹出层类型(text、容器ID、URL、Iframe)

content: "detail", //弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址)

width: 500, //弹出层的宽度

height: 300, //弹出层的高度

scrollTop: 200, //层滑动的高度也就是弹出层时离顶部滑动的距离

isAuto: true, //是否自动弹出

time: 2000, //设置弹出层时间，前提是isAuto=true

isClose: false, //是否自动关闭

timeOut: 5000 //设置自动关闭时间，前提是isClose=true

});

});

以上所述是小编给大家介绍的jQuery 弹出层插件(推荐)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！