Thickbox是一款很不错的jquery弹出层的插件.关于他的细节用法,可以参考他的官方说明。最近一直在用这个插件,发现他的一个modal模式没有右上侧的关闭按钮。于是我就随便弄了一个,有点卖巧。
效果图如下:
这样就可以点击关闭图标关闭modal窗口。
详细代码如下:
- <div id="login" style="text-align: center">
- <div style="position:absolute; right:0; top:0"><img src="p_w_picpaths/closebox.png" onclick="parent.tb_remove()" alt="点击关闭" style="cursor:pointer" /></div>
- <table border="0" cellpadding="3" cellspacing="3" style="margin: 0 auto;">
- <tr>
- <td style="text-align: right; padding: 10px">
- <label>
- 用户:</label>
- </td>
- <td>
- <input id="username" type="text" size="20" />
- </td>
- </tr>
- <tr>
- <td style="text-align: right; padding: 10px">
- <label>
- 密码:</label>
- </td>
- <td>
- <input id="password" type="password" size="20" />
- </td>
- </tr>
- <tr align="right">
- <td colspan="2">
- <input type="submit" id="Login" value=" 登 录 " style="margin-right: 50px">
- <input type="submit" id="LoginCancel" value=" 取 消 " onclick="parent.tb_remove()">
- </td>
- </tr>
- </table>
- </div>