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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
关于Python中异常(Exception)的汇总
2017/01/18 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
Python爬虫教程知识点总结
2020/10/19 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
Android interview questions
2016/12/25 面试题
幼儿园教师培训制度
2014/01/16 职场文书
村干部承诺书
2014/03/28 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
运动员代表致辞
2015/07/29 职场文书
运动会开幕式致辞
2015/07/29 职场文书
小学体育课教学反思
2016/02/16 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android