漂亮的tip提示框

最新推荐文章于 2021-06-17 04:35:38 发布

lizhihui1987

最新推荐文章于 2021-06-17 04:35:38 发布

阅读量313

点赞数

分类专栏：漂亮的tip提示框文章标签： xhtml javascript java ViewUI

本文链接：https://blog.csdn.net/lizhihui1987/article/details/84113621

版权

漂亮的tip提示框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂亮的tip提示框</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
    var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
 	var pltsoffsetY = 12; // 弹出窗口位于鼠标下方的距离；3-12 合适
 	var pltsTitle="";
 	var content = "<div id='pltsTipLayer' align='center' style='padding-top:5px;";
 	content += "display: none;width: 400px;height: 25px;position: absolute;";
 	content += "background-color: #dff6c6;border: 1px solid #bdde98;color:#860404'>";
 	content += "请按\"姓/名 性别\"的形式填写，如\"FOX/MEGAN MS\"</div>";
 	document.write(content);

    function displayTip(){
    	$("#pltsTipLayer").fadeIn("slow");
        var MouseX=event.x;
        var MouseY=event.y;
        var popTopAdjust=0;
        var popLeftAdjust=0;
        var popHeight=pltsTipLayer.clientHeight;
        var popWidth=pltsTipLayer.clientWidth;
        
        if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth){
   			popLeftAdjust=-popWidth-pltsoffsetX*2;
  		}
  		else{
    		popLeftAdjust=0;
  		}
  		
		pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
		pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
    }
    
    function hideTip()
    {
    	$("#pltsTipLayer").fadeOut("slow");
    }
</script>	
</head>

<body>
<input type="text" οnfοcus="displayTip();" οnblur="hideTip();"/>
</body>
</html>

lizhihui1987

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
漂亮的tip提示框

&lt;%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o
复制链接

扫一扫