HTML简单的提示框

2019年9月8日 107次阅读 来源: Corwien

由于项目中需要一个简单的提示框，就是鼠标放上去，可以提示相关信息，引用第三方的比较麻烦，所以，这里封装了一个很简单的HTML方法。

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script> 
function show(obj,id) { 
var objDiv = $("#"+id+""); 

/**
   这里我们可以使用ajax从数据库获取数据动态改变提示框里的内容
   $.post('./test.php',{act:"ajax_get_ifo", goods_id:goods_id}, function (res){
                objDiv.html("<br>"+res.data+"<br>");
            }, 'json');
**/
$(objDiv).css("display","block"); 
// e=e||window.event;  // 兼容firefox
$(objDiv).css("left", 0);   // 初始化，防止叠加
$(objDiv).css("top", 0); 
 var e = window.event || arguments.callee.caller.arguments[0];
$(objDiv).css("left", e.clientX + 30); 
$(objDiv).css("top", e.clientY - 45); 
} 
function hide(obj,id) { 
var objDiv = $("#"+id+""); 
$(objDiv).css("display", "none"); 
} 
</script> 


<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:gray;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.7;"> 
提示1效果 
</div> 
<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 1.0;"> 
不知道你们在干嘛呢，<br/>哈哈哈哈
</div> 

<a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a> 
<br><br><br><br><br> 
<a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>

《HTML简单的提示框》

这个提示框框，丑是丑了点，但是可以救急！

    原文作者：Corwien
    原文地址: https://segmentfault.com/a/1190000012343392
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞