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 常用代码技巧大收集
Feb 25 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
webpack多页面开发实践
Dec 18 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
JS中的模糊查询功能
Dec 08 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 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中header和session_start前不能有输出原因分析
2013/01/11 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
详解Vue之事件处理
2020/07/10 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python生成带有表格的图片实例
2019/02/03 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python: 传递列表副本方式
2019/12/19 Python
大型公益活动策划方案
2014/08/20 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
首席执行官观后感
2015/06/03 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android