jquery 弹出层

迷南。 2022-06-04 04:29 312阅读 0赞

easyDialog在经过一段时间的使用后，对使用中碰到的一些问题进行了总结，最近花了点时间对原来的代码进行了重构和优化，并加入了一些新功能。原来的版本只是为了实现简单的弹出层的基本功能，从项目的角度来说就是如何能快速的完成项目，而这个版本不仅仅是实现基本的功能，更多的考虑了弹出层如何更好更轻松的应用于项目中。

### easyDialog v2.0新增的功能： ###

1. 增加了默认的弹出层内容模板，如果只是一些简单的应用，自己可以不去写弹出层内容的结构，而只需传几个简单的参数即可，原来的使用方法：

<table style="border:0px!important; font-size:12px; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; line-height:24px; text-align:left!important; float:none!important; height:auto!important; min-height:inherit!important; border-collapse:collapse!important"> 
 <tbody style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
  <tr style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
   <td style="border:0px!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important; width:2.5em!important"> <code style="padding-top:0px; padding-right:0.7em!important; padding-bottom:0px; padding-left:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; width:1.8em!important; display:block!important; color:rgb(87,96,73)!important">1</code></td> 
   <td style="border-width:0px 0px 0px 2px!important; border-left-style:solid!important; border-left-color:rgb(124,165,105)!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0.7em!important; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> <code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">easyDialog.open({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table style="border:0px!important; font-size:12px; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; line-height:24px; text-align:left!important; float:none!important; height:auto!important; min-height:inherit!important; border-collapse:collapse!important"> 
 <tbody style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
  <tr style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
   <td style="border:0px!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important; width:2.5em!important"> <code style="padding-top:0px; padding-right:0.7em!important; padding-bottom:0px; padding-left:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; width:1.8em!important; display:block!important; color:rgb(87,96,73)!important">2</code></td> 
   <td style="border-width:0px 0px 0px 2px!important; border-left-style:solid!important; border-left-color:rgb(124,165,105)!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0.7em!important; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> <code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">&nbsp;&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">container :&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; color:blue!important">'demoBox'</code></td> 
  </tr> 
 </tbody> 
</table>

使用默认的内容模板，那么container参数可以这么用：

<table style="border:0px!important; font-size:12px; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; line-height:24px; text-align:left!important; float:none!important; height:auto!important; min-height:inherit!important; border-collapse:collapse!important"> 
 <tbody style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
  <tr style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
   <td style="border:0px!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important; width:2.5em!important"> <code style="padding-top:0px; padding-right:0.7em!important; padding-bottom:0px; padding-left:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; width:1.8em!important; display:block!important; color:rgb(87,96,73)!important">2</code></td> 
   <td style="border-width:0px 0px 0px 2px!important; border-left-style:solid!important; border-left-color:rgb(124,165,105)!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0.7em!important; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> <code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">&nbsp;&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">container : { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style="border:0px!important; font-size:12px; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; line-height:24px; text-align:left!important; float:none!important; height:auto!important; min-height:inherit!important; border-collapse:collapse!important"> 
 <tbody style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
  <tr style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
   <td style="border:0px!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important; width:2.5em!important"> <code style="padding-top:0px; padding-right:0.7em!important; padding-bottom:0px; padding-left:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; width:1.8em!important; display:block!important; color:rgb(87,96,73)!important">3</code></td> 
   <td style="border-width:0px 0px 0px 2px!important; border-left-style:solid!important; border-left-color:rgb(124,165,105)!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0.7em!important; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> <code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">header :&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; color:blue!important">'弹出层标题'</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style="border:0px!important; font-size:12px; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; line-height:24px; text-align:left!important; float:none!important; height:auto!important; min-height:inherit!important; border-collapse:collapse!important"> 
 <tbody style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
  <tr style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
   <td style="border:0px!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important; width:2.5em!important"> <code style="padding-top:0px; padding-right:0.7em!important; padding-bottom:0px; padding-left:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; width:1.8em!important; display:block!important; color:rgb(87,96,73)!important">4</code></td> 
   <td style="border-width:0px 0px 0px 2px!important; border-left-style:solid!important; border-left-color:rgb(124,165,105)!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0.7em!important; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> <code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">content :&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; color:blue!important">'欢迎使用easyDialog : )'</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">,</code></td> 
  </tr> 
 </tbody> 
</table>

<table style="border:0px!important; font-size:12px; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; line-height:24px; text-align:left!important; float:none!important; height:auto!important; min-height:inherit!important; border-collapse:collapse!important"> 
 <tbody style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
  <tr style="border:0px!important; outline:0px!important; vertical-align:baseline!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> 
   <td style="border:0px!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding:0px; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important; width:2.5em!important"> <code style="padding-top:0px; padding-right:0.7em!important; padding-bottom:0px; padding-left:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important; width:1.8em!important; display:block!important; color:rgb(87,96,73)!important">5</code></td> 
   <td style="border-width:0px 0px 0px 2px!important; border-left-style:solid!important; border-left-color:rgb(124,165,105)!important; font-family:Consolas,'Courier New',Courier,mono; outline:0px!important; vertical-align:top!important; margin:0px!important; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0.7em!important; list-style:none; position:static; left:auto; top:auto; right:auto; bottom:auto; float:none!important; height:auto!important; min-height:inherit!important"> <code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="padding:0px; position:static; left:auto; top:auto; right:auto; bottom:auto; font-family:Consolas,'Courier New',Courier,mono; margin:0px!important; border:0px!important; outline:0px!important; float:none!important; vertical-align:baseline!important; height:auto!important; min-height:inherit!important">yesFn : btnFn,</code></td> 
  </tr> 
 </tbody> 
</table>

显示的效果如下图所示：

![easyDialog v2.0截图][easyDialog v2.0]

如果要修改默认的内容模板的样式，可以修改下载文档中的easydialog.css文件来实现你想要的样式。

2. 增加了拖拽效果，使弹出层有更好的用户体验，并且自定义弹出层内容也可以轻松实现拖拽效果。

3. 内部增加了缓存系统、微型事件处理系统，对弹出层内容也做了缓存，使弹出层性能更佳。

另外修改了一个参数的命名，原来的isOverlay改成了overlay，原来的弹出层各元素的id也重新命名，尽量避免冲突。

更详细的演示与说明：[http://stylechen.com/wp-content/uploads/demo/easydialog-v2.0/index.html][http_stylechen.com_wp-content_uploads_demo_easydialog-v2.0_index.html]

下载地址：[http://stylechen.com/wp-content/uploads/download/easydialog-v2.0.zip][http_stylechen.com_wp-content_uploads_download_easydialog-v2.0.zip]

查看以往版本：[http://stylechen.com/easydialog.html][http_stylechen.com_easydialog.html]

[easyDialog v2.0]: http://stylechen.com/wp-content/uploads/2011/08/easydialog_demo.png
[http_stylechen.com_wp-content_uploads_demo_easydialog-v2.0_index.html]: http://stylechen.com/wp-content/uploads/demo/easydialog-v2.0/index.html
[http_stylechen.com_wp-content_uploads_download_easydialog-v2.0.zip]: http://stylechen.com/wp-content/uploads/download/easydialog-v2.0.zip
[http_stylechen.com_easydialog.html]: http://stylechen.com/easydialog.html