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 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Angularjs过滤器使用详解
May 25 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
详解vuex状态管理模式
Nov 01 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php表单处理操作
2017/11/16 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
老生常谈python中的重载
2018/11/11 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python实现3D地图可视化
2020/03/25 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Django ORM filter() 的运用详解
2020/05/14 Python
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
旷课检讨书2000字
2014/01/14 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
冬季安全检查方案
2014/05/23 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
统计员岗位职责
2015/02/11 职场文书
后天观后感
2015/06/08 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js