让你的thickbox的modal也拥有关闭图标

简介:

Thickbox是一款很不错的jquery弹出层的插件.关于他的细节用法,可以参考他的官方说明。最近一直在用这个插件,发现他的一个modal模式没有右上侧的关闭按钮。于是我就随便弄了一个,有点卖巧。

效果图如下:

 这样就可以点击关闭图标关闭modal窗口。

详细代码如下:

 
  1. <div id="login" style="text-align: center"> 
  2. <div style="position:absolute; right:0; top:0"><img src="images/closebox.png" onclick="parent.tb_remove()" alt="点击关闭" style="cursor:pointer" /></div> 
  3. <table border="0" cellpadding="3" cellspacing="3" style="margin: 0 auto;"> 
  4. <tr> 
  5. <td style="text-align: right; padding: 10px"> 
  6. <label> 
  7. 用户:</label> 
  8. </td> 
  9. <td> 
  10. <input id="username" type="text" size="20" /> 
  11. </td> 
  12. </tr> 
  13. <tr> 
  14. <td style="text-align: right; padding: 10px"> 
  15. <label> 
  16. 密码:</label> 
  17. </td> 
  18. <td> 
  19. <input id="password" type="password" size="20" /> 
  20. </td> 
  21. </tr> 
  22. <tr align="right"> 
  23. <td colspan="2"> 
  24. <input type="submit" id="Login" value="  登 录  " style="margin-right: 50px">   
  25. <input type="submit" id="LoginCancel" value="  取 消  " onclick="parent.tb_remove()"> 
  26. </td> 
  27. </tr> 
  28. </table> 
  29. </div> 

 

 

    本文转自xshf12345 51CTO博客,原文链接:http://blog.51cto.com/alexis/573358,如需转载请自行联系原作者




相关文章
|
9天前
|
JavaScript
dialog打开时重新渲染
dialog打开时重新渲染
11 0
|
9天前
|
前端开发 网络安全 数据库
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
15 0
|
9天前
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
67 0
|
JavaScript 前端开发
layui实现点击按钮全屏
layui实现点击按钮全屏
387 0
el-popover 点击取消按钮,弹窗仍然无法关闭
el-popover 点击取消按钮,弹窗仍然无法关闭
|
6月前
|
缓存
layui打开iframe窗口不刷新的问题
layui打开iframe窗口不刷新的问题
82 0
|
6月前
|
开发者
jeDate日期控件的使用以及选中后点确定按钮关闭功能
jeDate日期控件的使用以及选中后点确定按钮关闭功能
65 0
|
6月前
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
102 0
|
Web App开发 JavaScript 前端开发
对话框、模态框和弹出框看起来很相似,它们有何不同?
由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。
26299 1
|
JavaScript 前端开发 程序员
解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式
解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式
602 0