首页 相关文章 jQuery Dialog弹出层对话框插件

jQuery Dialog弹出层对话框插件

网上这种插件很多,但是没一个合适的,大部分都做得很大,功能齐全。于是自己做了这个小插件,顺便学习下jQuery插件的写法。

原理很简单,通过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事件中,计算两次移动鼠标位置的...[ 查看全文 ]

2016-02-19 标签:

jQuery Dialog弹出层对话框插件的相关文章

手机页面
收藏网站 回到头部