自定义Js温馨提示窗

港控/mmm° 2022-07-27 14:49 178阅读 0赞

**自定义Js温馨提示窗**

自己写的Js温馨提示窗，实现鼠标点击图片弹出提示信息，鼠标点击关闭按钮，提示窗消失。基本上全用JQuery代码写成，小巧灵活，可以应用到很多Web项目中。

以下是实现效果截图：

![Center][]

具体Test.jsp文件如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    
    <!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 content="text/html; charset=UTF-8" http-equiv="content-type" />
    <title>测试</title>
    <script type="text/javascript"
    	src="/static/js/jquery-1.8.2.min.js"></script>
    
    <script type="text/javascript">
          
    	$(function() {
    		$("#main_mid_1").mouseover(function() {
    			$("#main_mid_1").css({
    				"background" : "#f4f4f4",
    				"color" : "#086ebf",
    				"font-weight" : "bold"
    			});
    			$("#main_mid_1 p").css({
    				"color" : "#086ebf",
    				"font-weight" : "bold"
    			});
    		});
    	});
    	$(function() {
    		$("#main_mid_1").mouseout(function() {
    			$("#main_mid_1").css({
    				"background" : "#fff",
    				"color" : "#086ebf",
    				"font-weight" : "normal"
    			});
    			$("#main_mid_1 p").css({
    				"color" : "#000",
    				"font-weight" : "normal"
    			});
    		});
    	});
          
    
          
    	function sAlert(str){
    		var msgw,msgh,bordercolor;
    		msgw=500;  //提示窗口的宽度
    		msgh=200;   //提示窗口的高度
    		titleheight=25    //提示窗口标题高度
    		bordercolor="#086ebf";    //提示窗口的边框颜色
    		titlecolor="#086ebf";   //提示窗口的标题颜色
    
    		var sWidth,sHeight;
    		sWidth=screen.width;
    		sHeight=screen.height;
    
    		var bgObj=document.createElement("div");
    		bgObj.setAttribute('id','bgDiv');
    		bgObj.style.position="absolute";
    		bgObj.style.top="0";
    		bgObj.style.background="#000000";
    		bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    		bgObj.style.opacity="0.2";
    		bgObj.style.left="0";
    		bgObj.style.width=sWidth + "px";
    		bgObj.style.height=sHeight + "px";
    		bgObj.style.zIndex = "10000";
    		document.body.appendChild(bgObj);
    
    		var msgObj=document.createElement("div")
    		msgObj.setAttribute("id","msgDiv");
    		msgObj.setAttribute("align","center");
    		msgObj.style.background="#fff";
    		msgObj.style.border="1px solid " + bordercolor;
    		msgObj.style.position = "absolute";
    		msgObj.style.left = "50%";
    		msgObj.style.top = "50%";
    		msgObj.style.font="15px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif, Microsoft YaHei";
    		msgObj.style.color="#000";
    		msgObj.style.marginLeft = "-225px" ;
    		msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
    		msgObj.style.width = msgw + "px";
    		msgObj.style.height =msgh + "px";
    		msgObj.style.textAlign = "center";
    		msgObj.style.lineHeight ="25px";
    		msgObj.style.zIndex = "10001";
    
    		var title=document.createElement("h4");
    	        title.setAttribute("id","msgTitle");
    		title.setAttribute("align","right");
    		title.style.margin="0";
    		title.style.padding="3px";
    		title.style.background=bordercolor;
    		title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
    		title.style.opacity="0.75";
    		title.style.border="1px solid " + bordercolor;
    		title.style.height="18px";
    		title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif, Microsoft YaHei";
    	        title.style.color="white";
    		title.style.cursor="pointer";
    		title.innerHTML="关闭";
    		title.οnclick=function(){
    			document.body.removeChild(bgObj);
    		        document.getElementById("msgDiv").removeChild(title);
    			document.body.removeChild(msgObj);
    		}
    		document.body.appendChild(msgObj);
    		document.getElementById("msgDiv").appendChild(title);
    		var txt=document.createElement("p");
    		txt.style.margin="1em 0"
    		txt.setAttribute("id","msgTxt");
    		txt.innerHTML=str;
    		document.getElementById("msgDiv").appendChild(txt);
    		}
    </script>
    </head>
    
    <body class="bg" style="background: #e8eff4; width: 1349px;">
        <div id="main_mid_1"   style="height: 110px; width: 120px; background: #fff; ">
    	<a  href="javascript:void(0)" οnclick="sAlert('该功能模块正在开发，敬请期待')" >
               <img style="vertical-align: middle; height: 70px; width: 70px; margin-top: 13px; margin-left: 25px;"
    		src="<%=basePath%>static/image/main_supplier/oltest.png"></img>
    	   <p style="margin-left: 32px; font-size: 14px; color: #000">测试</p>
            </a>
        </div>				
    </body>
    </html>

[Center]: /images/20220727/1209551145f54166aa2aee38465fcf4f.png