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

效果图如下:

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

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

详细代码如下:

  1. <div id="login" style="text-align: center"> 
  2. <div style="position:absolute; right:0; top:0"><img src="p_w_picpaths/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>