jQuery 弹出层插件(推荐)


Posted in Javascript onMay 24, 2016

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

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("<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); //当然响应事件对象
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("<iframe src=\"" + options.content + "\" width=\"100%\" height=\"" + (parseInt(options.height) - 70) + "px" + "\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
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示例:

<!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">弹出层插件测试</div>
<div id="detail" style="display: none;">
欢迎各位网友使用弹出层插件demo
</div>
<script type="text/javascript">
$(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 
});
});
</script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
jQuery限制图片大小的方法
May 25 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
javaScript Array api梳理
Mar 31 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 #Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 #Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 #Javascript
JavaScript程序中的流程控制语句用法总结
May 23 #Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 #Javascript
谈一谈bootstrap响应式布局
May 23 #Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 #Javascript
You might like
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP _construct()函数讲解
2019/02/03 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python实现用户答题功能
2018/01/17 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
责任胜于能力演讲稿
2014/05/20 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis