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

最新推荐文章于 2024-02-01 10:03:32 发布

weixin_34099526

最新推荐文章于 2024-02-01 10:03:32 发布

阅读量107

点赞数

文章标签： javascript ViewUI

本文介绍如何在使用Thickbox jQuery插件创建的Modal窗口中添加右上侧关闭按钮，通过简单的HTML和JavaScript代码实现。包括具体代码示例和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果图如下：

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

详细代码如下：

代码

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

作者：alexis(xshf12345),wwww.cnblogs.com/alexis