本文我們將和大家分享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>
相關推薦:
以上是HTML實作簡單的提示框的詳細內容。更多資訊請關注PHP中文網其他相關文章!