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嵌套函数及闭包
Nov 09 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 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中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
js命名空间写法示例
2015/12/18 Javascript
Javascript复制实例详解
2016/01/28 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
React简单介绍
2017/05/24 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
python图像处理之镜像实现方法
2015/05/30 Python
Python实现文件复制删除
2016/04/19 Python
python实现彩票系统
2020/06/28 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
基于python3生成标签云代码解析
2020/02/18 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
2014年商场工作总结
2014/11/22 职场文书
检讨书格式
2015/01/23 职场文书
黄石寨导游词
2015/02/05 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
四大名著读书笔记
2015/06/25 职场文书
Python List remove()实例用法详解
2021/08/02 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技