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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php生成短网址示例
2014/05/05 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
js实现扫雷源代码
2020/11/27 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
Python subprocess模块详细解读
2018/01/29 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
信息部岗位职责
2013/11/12 职场文书
小学教师岗位职责
2013/11/25 职场文书
安全生产专项整治方案
2014/05/06 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2014年度考核工作总结
2014/12/24 职场文书
环保证明
2015/06/23 职场文书
教师研修随笔感言
2015/11/18 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js