自定义Js温馨提示窗

最新推荐文章于 2023-09-27 08:50:07 发布

火雨_Nick

最新推荐文章于 2023-09-27 08:50:07 发布

阅读量2.6k

点赞数

分类专栏：前端开发各种Js插件使用方法整理文章标签： javascript 温馨提示小窗 JQuery 消息窗 Web前端

本文链接：https://blog.csdn.net/wp1603710463/article/details/50966616

版权

各种Js插件使用方法整理同时被 2 个专栏收录

18 篇文章 24 订阅

订阅专栏

前端开发

16 篇文章 1 订阅

订阅专栏

自定义Js温馨提示窗

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

以下是实现效果截图：

具体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>

火雨_Nick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
自定义Js温馨提示窗

自定义Js温馨提示窗自己写的Js温馨提示窗，实现鼠标点击图片弹出提示信息，鼠标点击关闭按钮，提示窗消失。基本上全用JQuery代码写成，小巧灵活，可以应用到很多Web项目中。以下是实现效果截图：具体Test.jsp文件如下：<%@ page language="java" contentType="text/html; ch
复制链接

扫一扫