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为页面添加天气显示实现思路及代码
Dec 02 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
window.location.hash知识汇总
Nov 09 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
向领导表决心的话
2014/03/11 职场文书
五一劳动节活动记录
2014/03/23 职场文书
贷款委托书怎么写
2014/08/02 职场文书
十佳家长事迹材料
2014/08/26 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
歌剧魅影观后感
2015/06/05 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang