简单实现js浮动框

2022-01-14,,

这篇文章主要为大家详细介绍了如何简单实现js浮动框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js浮动框的实现代码,供大家参考,具体内容如下

一.在需要加入浮动框的页面中加入如下css代码

  #msg_win { border: 1px solid #A67901; background: #EAEAEA; width: 240px; position: absolute; right: 0; font-size: 12px; font-family: Arial; margin: 0px; display: none; overflow: hidden; z-index: 99; } #msg_win .icos { position: absolute; top: 2px; *top: 0px; right: 2px; z-index: 9; } .icos a { float: left; color: #833B02; margin: 1px; text-align: center; font-weight: bold; width: 14px; height: 22px; line-height: 22px; padding: 1px; text-decoration: none; font-family: webdings; } .icos a:hover { color: #fff; } #msg_title { background: #BBDEF6; border-bottom: 1px solid #A67901; border-top: 1px solid #FFF; border-left: 1px solid #FFF; color: #000; height: 25px; line-height: 25px; text-indent: 5px; } #msg_content { margin: 5px; margin-right: 0; width: 230px; height: 126px; overflow: hidden; } 

二.js代码(注意:该代码要添加整个页面最后,目的是页面加载完成时加载它)

 

三.html代码(注意:该代码要放置到body的最后)

 
_×设备运行情况--> ${commonMsg.devRun }

以上就是简单实现js浮动框的详细内容,更多请关注本站其它相关文章!

《简单实现js浮动框.doc》

下载本文的Word格式文档,以方便收藏与打印。