如何制作弹出窗口

最新推荐文章于 2023-11-29 21:21:08 发布

nacky_

最新推荐文章于 2023-11-29 21:21:08 发布

阅读量6.3k

点赞数 4

分类专栏：前端文章标签： jquery 弹出窗口对话框

本文链接：https://blog.csdn.net/naiqihe/article/details/51712252

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

弹出窗口十分的常用，下面是最常用的三种弹出窗口方式：

//第一种
//弹出对话框并输出一段提示信息  
alert("提示信息！");  
//第二种
//弹出一个询问框，有确定和取消按钮  
//利用对话框返回的值 （true 或者 false）  
if (confirm("你确定提交吗？")) {  
    alert("点击了确定");  
    }  
else{  
    alert("点击了取消");  
    }  
//第三种
//弹出一个输入框
var name = prompt("请输入您的名字", ""); //这里会将输入的内容赋给变量 name 
//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
//我们可以把输入的内容打印出来
alert("欢迎您：" + name)

下面是使用jQuery来制作自定义的弹框,实际上大部分的UI弹窗都是基于下面的方法拓展演化出来的。基本原理如下：

1.定义一个DIV，定义好其宽度和高度。在这个DIV中写自己要展示的内容。

2.设置CSS隐藏上面的DIV。

3.使用jQuery控制显示隐藏的DIV并用绝对定位设置DIV的位置，使其显示在我们设定好的位置。

4.设置z-index属性将DIV显示在页面最前面。

下面是带有遮罩层的弹出窗代码示例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop window</title>
<link rel="stylesheet" href="tankuang.css">
<script src="jquery.js"></script>
<script type="text/javascript">
	$(function() {
		var oBtn = $('#show');
		var popWindow = $('.popWindow');
		var close = $('.popWindow h3 span');
		//浏览器可视区域的宽度
		var browserWidth = $(window).width();

		//浏览器可视区域的高度
		var browserHeight = $(window).height();

		//浏览器纵向滚动条距离上边界的值
		var browserScrollTop = $(window).scrollTop();

		//浏览器横向滚动条距离左边界的值
		var browserScrollLeft = $(window).scrollLeft();

		//弹出窗口的宽度,outerWidth设置为true计算时会把padding,border和margin计算进去
		var popWindowWidth = popWindow.outerWidth(true);
		//弹出窗口的高度
		var popWindowHeight = popWindow.outerHeight(true);

		//left的值＝浏览器可视区域的宽度／2－弹出窗口的宽度／2+浏览器横向滚动条距离左边界的值
		var positionLeft = browserWidth / 2 - popWindowWidth / 2
				+ browserScrollLeft;

		//top的值＝浏览器可视区域的高度／2－弹出窗口的高度／2+浏览器纵向滚动条距离上边界的值
		var positionTop = browserHeight / 2 - popWindowHeight / 2
				+ browserScrollTop;
		
		var maskDiv ='<div class="maskDiv" ></div>';
		//遮罩层的宽度
		var masWidth = $(document).width();
		var masHeight = $(document).height();
		//当浏览器大小发生改变时计算改变弹出窗口的位置
		$(window).resize(
				function() {
				if(popWindow.is(':visible')){//当popWindow是可见的时候设置变化
					browserWidth = $(window).width();
					browserHeight = $(window).height();
					positionLeft = browserWidth / 2 - popWindowWidth / 2
							+ browserScrollLeft;
					positionTop = browserHeight / 2 - popWindowHeight / 2
							+ browserScrollTop;					
					//重新设置弹出窗的位置，使其位置随浏览器大小变化而变化
					popWindow.css({
						'left' : positionLeft + 'px',
						'top' : positionTop + 'px'
					});
					masWidth = $(document).width();
					masHeight = $(document).height();
					//重新设置遮罩层宽高，使其宽高随浏览器大小变化而变化
					$(".maskDiv").width(masWidth).height(masHeight);
				}
				});

		//滚动滚动条时计算改变弹出窗口的位置
		$(window).scroll(
				function() {
				if(popWindow.is(':visible')){
				    browserScrollTop = $(window).scrollTop();
					browserScrollLeft = $(window).scrollLeft();
					positionLeft = browserWidth / 2 - popWindowWidth / 2
							+ browserScrollLeft;
					positionTop = browserHeight / 2 - popWindowHeight / 2
							+ browserScrollTop;
										//重新设置弹出层的位置，使其位置随着滚动条滚动改变
					popWindow.css({
						'left' : positionLeft + 'px',
						'top' : positionTop + 'px'
					});
				}
					
				});
 		//当鼠标点击弹出按钮时触发
		oBtn.click(function() {
                        //设置弹出窗的位置
			popWindow.show().animate({
				'left' : positionLeft + 'px',
				'top' : positionTop + 'px'
			}, 500);
			//页面增加遮罩层
			$('body').append(maskDiv);
			//设置遮罩层的宽高
			$(".maskDiv").width(masWidth).height(masHeight);
			//设置遮罩层的样式
			$(".maskDiv").css({
						'left' : '0px',
						'top' :  '0px',
						'z-index' : '1',
						'position' : 'absolute',
						'opacity' : '0.4',
						'height' : masHeight + 'px',
						'width' : masWidth + 'px',
						'background-color' : 'black'
					}); //也可以在css中定义
			
		});
		//当鼠标点击关闭时触发
		close.click(function() {
			//隐藏弹出层，还原弹出层的位置
			popWindow.hide().animate({
				'left' : '0px',
				'top' : '0px'
			}, 0);
			//将遮罩层代码从页面中删除
			$(".maskDiv").remove();
		});
	});
</script>
</head>
<body style="width:2000px">
	<br />
	<a href="javascript:;" id="show">显示窗口</a>

	<div class="popWindow hide">
		<h3>
			弹出窗口的标题<span>关闭</span>
		</h3>
		<div class="content" id="content">弹出窗口的内容</div>
	</div>
</body>
</html>

css部分：

.popWindow{  
      
    width:500px;/* 设置弹出窗口的宽度 */  
    height:500px;/* 设置弹出窗口的高度 */  
    background-color: buttonface;  
    left:0px;  
    top:0px;  
    position: absolute;/* 设置弹出窗口为绝对定位，这样后面设置位置才会起效 */  
    z-index: 2;  
}  
.popWindow h3{/* 设置弹出窗口的标题栏的样式 */  
    height:30px;  
    line-height:30px;  
    margin:0;  
    padding:0;  
}  
.hide{/* 隐藏 弹出窗口DIV*/  
    display: none;  
}  
.popWindow h3 span{  
    float: right;  
    font-size: 14px;  
    font-weight:bold;  
    cursor: pointer;  
    margin-right: 5px;  
}  
.popWindow h3 span:HOVER{  
    color: red;  
}  
.popWindow .popWindowcontent{  
    height: 470px;  
    background-color:white;  
}  
/* 设置遮罩层的样式，如果在这里设置则js中设置css样式部分可以省去 */  
.maskDiv{  
    background-color: black;  
    opacity:0.4;  
    position: absolute;  
    top: 0px;  
    left: 0px;  
    z-index: 1;  
}

不要忘记引入 jquery.js，如果有疑问可以留言哈~！

nacky_

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
如何制作弹出窗口

下面是使用jQuery来制作自定义的弹框,实际上大部分的UI弹窗都是基于下面的方法拓展演化出来的。基本原理如下：1.定义一个DIV，定义好其宽度和高度。在这个DIV中写自己要展示的内容。2.设置CSS隐藏上面的DIV。3.使用jQuery控制显示隐藏的DIV并用绝对定位设置DIV的位置，使其显示在我们设定好的位置。4.设置z-index属性将DIV显示在页面最前面。
复制链接

扫一扫