时间:2021-07-01 10:21:17 帮助过:48人阅读
本文我们将和大家分享HTML实现简单的提示框,由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法。
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script> function show(obj,id) { var objp = $("#"+id+""); /** 这里我们可以使用ajax从数据库获取数据动态改变提示框里的内容 $.post('./test.php',{act:"ajax_get_ifo", goods_id:goods_id}, function (res){ objp.html("<br>"+res.data+"<br>"); }, 'json'); **/ $(objp).css("display","block"); $(objp).css("left", event.clientX + 30); $(objp).css("top", event.clientY - 45); } function hide(obj,id) { var objp = $("#"+id+""); $(objp).css("display", "none"); } </script> <p id="myp1" style="position:absolute;display:none;border:1px solid silver;background:gray;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.7;"> 提示1效果 </p> <p id="myp2" style="position:absolute;display:none;border:1px solid silver;background:silver;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 1.0;"> 不知道你们在干嘛呢,<br/>哈哈哈哈 </p> <a id="t1" onMouseOver="javascript:show(this,'myp1');" onMouseOut="hide(this,'myp1')">鼠标放上去1</a> <br><br><br><br><br> <a id="t2" onMouseOver="javascript:show(this,'myp2');" onMouseOut="hide(this,'myp2')">鼠标放上去2</a>
相关推荐:
CSS如何实现提示框的实例详解
使用css实现全兼容tooltip提示框
四种提示框代码_PHP教程
以上就是HTML实现简单的提示框的详细内容,更多请关注Gxl网其它相关文章!