jQuery Dialog 弹出层对话框插件


Posted in Javascript onAugust 09, 2010

原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置。再通过适当的加工美化就成了。

<!-- 背景遮盖层 --> 
<div class="dialog-overlay"></div> <!-- 对话框 --> 
<div class="dialog"> 
<div class="bar"> 
<span class="title">标题</span> 
<a class="close">[关闭]</a> 
</div> 
<div class="content">内容部分</div> 
</div>

这就是两个div层的结构,第一个背景遮盖层只有在需要的时候才创建。每个div都定义了一个CSS类,这样便于自定义其外观。

一些基本功能的实现
移动框体
只要在mousemove事件中,计算两次移动鼠标位置的差值,再加上被移动框的原始的top,left,就是对话框新的位置。mousemove事件只需要在鼠标按下标题栏的时候才需要触发,所以只有在触发标题栏的mousedown事件时才绑定mousemove事件,而鼠标释放时也同时解除mousemove的绑定。

mousemove和解除绑定mousemove事件的mouseup却没有绑定到标题栏上,而是document上,之所以这样,是因为有时鼠标移动过快时,会移出标题栏范围,此时若是绑定到标题栏上的事件就会失效,而绑定到document就不会。

var mouse={x:0,y:0}; 
function moveDialog(event) 
{ 
var e = window.event || event; 
var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y); 
var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x); 
dialog.css({top:top,left:left}); 
mouse.x = e.clientX; 
mouse.y = e.clientY; 
}; 
dialog.find('.bar').mousedown(function(event){ 
var e = window.event || event; 
mouse.x = e.clientX; 
mouse.y = e.clientY; 
$(document).bind('mousemove',moveDialog); 
}); 
$(document).mouseup(function(event){ 
$(document).unbind('mousemove', moveDialog); 
});

定位
居中定位很容易实现,IE下的clientWidth, offsetWidth等一系列属性和其它浏览器好像有点不一样,所以不要用这些属性,可以直接用jQuery下的width()函数:
var left = ($(window).width() - dialog.width()) / 2; 
var top = ($(window).height() - dialog.height()) / 2; 
dialog.css({top:top,left:left});IE6下并没有fixed模式,但是能通过window.onscroll事件模拟实现: // top 对话框到可视区域顶部位置的距离。 
var top = parseInt(dialog.css('top')) - $(document).scrollTop(); 
var left = parseInt(dialog.css('left')) - $(document).scrollLeft(); 
$(window).scroll(function(){ 
dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left}); 
});

z-index
为了能实现多个对话框并存,采用了一个静态的zIndex变量,每次创建新对话框时,都实现一次自增操作,并将新值赋值给新创建的对话框的z-index,这样就能保证最后创建的对话框总在最前面。

对外接口
插件通过以下的方式调用:

var dlg = new Dialog(content, options); 
dlg.show();当然如果只是一般的使用,可以更简单一些: new Dialog(content, options).show(); 
// 或是 
dialog(content, options);还可以通过以下四个函数,对插件进行进一步的控制:

show():显示对话框
hide():隐藏对话框,但并不删除对话框内的内容。
close():关闭对话框,彻底删除其内容。
setContent(content):改变对话框内的内容。
构造函数的参数
构造函数有两个参数。content和options。content表示对话框的内容;options表示对话框的各个配置选项。

content可以是一个字符串,表示显示的内容。或是一个Object类型,若是Object类型,则需要包含以下两个属性:type和value。type表示数据类型,而value则是type对应的内容。type接受以下几种类型:

id:显示某一ID的内容,但并不包含此ID本身的内容。value对应为某一HTML元素的ID值。
img:显示一张图片。value对应为图片的uri。
url:通过ajax方式显示某一URL的内容,所以必需要在同一域名下。value为对应的URL地址。
iframe:将一URL指定的内容显示到iframe中,它去除了AJAX调用的一些限制(相同域名,返回的HTML代码中不能包含head头等。)。value为对应的URL。
options则是对Dialog行为和外观的具体设置:

选项
名称 描述 默认值
title 标题栏的文本 标题
closeText 关闭按钮文字 [关闭]
showTitle 是否显示标题栏,若为否,则标题和关闭按钮都将不显示。 true
draggable 是否可以拖动框体。 true
modal 模态对话框,若为是,则不可操作背景层。 true
center 是否居中显示,若为否,则通过CSS中的内容进行定位。 true
fixed 对话框是否跟随滚动条移动。 true
time 自动关闭对话框时间,单位毫秒,若为0,表示不会自动关闭。 0
id 对话框的ID。若为false,则表示自动产生。 false
回调函数
名称 描述 返回值类型
beforeShow 在显示之前调用,若返回false,则不显示对话框。 bool
afterShow 显示之后调用。
beforeHide 在隐藏之前调用,若返回false,则不隐藏对话框。 bool
afterHide 隐藏之后调用。
beforeClose 在关闭之前调用,若返回false,则不关闭对话框。 bool
afterClose 关闭之后调用。

自定义CSS

插件为对话框的每一个部分都提供了一个CSS类名,很容易实现CSS的自定义:

类名 描述
.dialog-overlay 模态对话框时,的背景遮盖层。
.dialog 对话框的CSS。
.dialog .bar 标题栏的CSS。包含了标题和关闭按钮。
.dialog .bar .title 标题栏的标题部分。
.dialog .bar .close 标题栏的关闭按钮部分。
.dialog .content 内容部分。

你可以直接修改这些CSS类,进行全局的修改,也可以通过id加类名的方式修改某一个对话框。

/* 只修改id为#dialog的对话框。 */ 
#dialog1 .bar 
{ 
text-transform:lowercase; 
} 
// 通过id属性指定对话框的id。 
new Dialog('text',{id:'dialog1'});

在线演示代码
代码打包下载
Javascript 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
js正则相关知识点专题
May 10 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
jquery下json数组的操作实现代码
Aug 09 #Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 #Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 #Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 #Javascript
javascript 防止刷新,后退,关闭
Aug 07 #Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 #Javascript
基于jquery的商品展示放大镜
Aug 07 #Javascript
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
在PHP中使用redis
2013/11/04 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
Python3.4解释器用法简单示例
2019/03/22 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python模块future用法原理详解
2020/01/20 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
十佳青年事迹材料
2014/08/21 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android