Home > Article > Web Front-end > HTML implements simple prompt box
In this article, we will share with you how to implement a simple prompt box in HTML. Since the project requires a simple prompt box, just put the mouse on it and you can prompt relevant information. It is more troublesome to quote a third party, so it is encapsulated here A very simple HTML method.
<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>
Related recommendations:
CSS How to Implement Tips Detailed explanation of box examples
Using css to implement fully compatible tooltip prompt boxes
Four types of prompt box codes_PHP tutorial
The above is the detailed content of HTML implements simple prompt box. For more information, please follow other related articles on the PHP Chinese website!