仿Windows弹出气泡提示框JS+css实现的两种方法，附源代码

最新推荐文章于 2021-08-15 15:03:55 发布

ddxg258

最新推荐文章于 2021-08-15 15:03:55 发布

阅读量3.1k

点赞数

分类专栏： js jsp 文章标签： css windows resources stylesheet div class

本文链接：https://blog.csdn.net/ddxg258/article/details/5431051

版权

js 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

jsp

26 篇文章 0 订阅

订阅专栏

最近项目中用到显示内容的提示框，自己根据网上的例子自己做了两套弹出式气球的提示框

下面是JSP页面调用的俩个JS和对应的CSS

<mce:script type="text/javascript" src="resources_oa/javascript/alert/addEvent.js" mce_src="resources_oa/javascript/alert/addEvent.js"></mce:script> <mce:script type="text/javascript" src="resources_oa/javascript/alert/sweetTitles.js" mce_src="resources_oa/javascript/alert/sweetTitles.js"></mce:script> <mce:style type="text/css" media="screen,projection"></mce:style><style type="text/css" media="screen,projection" mce_bogus="1">@import "resources_oa/css/alert/sweetTitles.css"; acronym,abbr { border-bottom:1px solid #06F;cursor:pointer; }</style>   <link rel="stylesheet" href="resources_oa/css/alert/bubble-tooltip.css" mce_href="resources_oa/css/alert/bubble-tooltip.css" media="screen"> <mce:script type="text/javascript" src="resources_oa/javascript/alert/bubble-tooltip.js" mce_src="resources_oa/javascript/alert/bubble-tooltip.js"></mce:script>

下面是他在页面里的具体调用：

1.用于第二种仿Windows气泡样式需要的DIV容器

<div id="bubble_tooltip"> <div class="bubble_top"></div> <div class="bubble_middle"><img src="resources_oa/images/close.gif" mce_src="resources_oa/images/close.gif" width="23px" border="0" height="15px" align="right" οnclick="hideToolTip()"><span id="bubble_tooltip_content"></span></div> <div class="bubble_bottom"></div> </div>

2.具体的调用事件，（这个调用时同时调用了这两个不通的提示框）

<acronym title="要显示HTML代码，第一种" οnclick="showToolTip(event,'要显示HTML代码第二种');return false" >点击查看</acronym>

说明：acronyms标签是自己定义的，第一种提示窗口信息会根据title属性来显示，鼠标落上显示，移开隐藏

showtooltip（）事件触发的是第二种弹出式气球，

对应的JS和CSS以及图片请自行下载

第一种：http://download.csdn.net/source/2173782

第二种：http://download.csdn.net/source/2173768