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

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
复制代码

 

 

posted @   Alexis  阅读(2588)  评论(9编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示