纯CSS为网页加入模态窗口（模态对话框）教学

7 月102015

作者：超级efly 发布：2015-07-10 15:13 分类：网络阅读：11,205

相信大家近期在访问畅想资源时都发现在看了文章主体部分后会自动于网页上显示一内容为Facebook专页/微博的窗口，这就是所谓的模态窗口（内地称为模态对话框）了。这个模态窗口可以帮助网站开发人员显示网页中的特定内容，让用户聚焦到这个地方。今天「畅想资源」就来教大家如何使用纯CSS（当然还有JS以显示/隐藏窗口）来为网页加入这个模态窗口～

欢迎访问「畅想资源」！

你也可以试试拉伸浏览器窗口来查看效果哦～

预览

打开测试模态窗口

教学

1、首先我们当然先写弹窗的CSS部分：

注：如需修改模态窗口的长宽，在修改 .modalDialog > div 中 height width 的同时记得也要根据自己的情况慢慢调试修改 margin-left 以及 margin-top

.modalDialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	z-index: 99999999;
	opacity: 0;
	display: none;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity: 1;
	pointer-events: auto;
}
.modalDialog > div {
	position: absolute;

	width: 470px;
	height: 500px;

	border-radius: 10px;
	background: #fff;
	top: 50%;
	left: 50%;
	margin-left: -235px;
	margin-top: -250px;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	margin-right: -50%;
	padding: 5px;

	background: #fff;

	-webkit-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
	-moz-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
	box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
}
.modalDialog > div > p {
	margin: 5px;
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
	cursor: pointer;
}

.close:hover {
	background: #0088dd;
}

.modalDialog {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.6);

z-index: 99999999;

opacity: 0;

display: none;

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;

transition: opacity 400ms ease-in;

pointer-events: none;

}

.modalDialog:target {

opacity: 1;

pointer-events: auto;

}

.modalDialog > div {

position: absolute;

width: 470px;

height: 500px;

border-radius: 10px;

background: #fff;

top: 50%;

left: 50%;

margin-left: -235px;

margin-top: -250px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin-right: -50%;

padding: 5px;

background: #fff;

-webkit-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);

-moz-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);

box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);

}

.modalDialog > div > p {

margin: 5px;

}

.close {

background: #606061;

color: #FFFFFF;

line-height: 25px;

position: absolute;

right: -12px;

text-align: center;

top: -10px;

width: 24px;

text-decoration: none;

font-weight: bold;

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

border-radius: 12px;

-moz-box-shadow: 1px 1px 3px #000;

-webkit-box-shadow: 1px 1px 3px #000;

box-shadow: 1px 1px 3px #000;

cursor: pointer;

}

.close:hover {

background: #0088dd;

}

2、然后就是开启/隐藏的函数控制：为实现淡入淡出的效果，我们需要先使用 display: block 来取消隐藏、等待500毫秒后再调整窗口的 opacity 为 1 （否则将会出现突然弹出的情况）；而关闭窗口则是先调整窗口的 opacity 为 0 、等待500毫秒后在 display: none 来完全隐藏，完美实现淡入淡出效果

注：本例中我使用了jQuery来进行上述操作，实际上JS等亦可以达到同样效果（详情请自行Google）

function openPopup() {
	$('#openModal').css({'display': 'block'});
	setTimeout(function() {
		$('#openModal').css({'opacity': '1', 'pointer-events': 'auto'});	
	}, 500);
}
function closePopup() {
	$('#openModal').css({'opacity': '0', 'pointer-events': 'none'});
	setTimeout(function() {
		$('#openModal').css({'display': 'none'});	
	}, 500);
};

function openPopup() {

$('#openModal').css({'display': 'block'});

setTimeout(function() {

$('#openModal').css({'opacity': '1', 'pointer-events': 'auto'});

}, 500);

}

function closePopup() {

$('#openModal').css({'opacity': '0', 'pointer-events': 'none'});

setTimeout(function() {

$('#openModal').css({'display': 'none'});

}, 500);

};

3、最后就是把弹窗的内容加入到网页里面去，以及加入相关按钮

提示：按钮部分可以以别的方式触发，例如本站就以用户完成观看文章内容部分为触发方式

<div id="openModal" class="modalDialog">
	<div>
		<div onclick="closePopup()" title="Close" class="close">X</div>
		<p>欢迎访问「<a href="https://www.arefly.com/" target="_blank">畅想资源</a>」！</p>
		<p style="color: blue;">你也可以试试拉伸浏览器窗口来查看效果哦～ :)</p>
		<!-- 更多内容... -->
	</div>
</div>

<a onclick="openPopup()">打开</a>

<div>

<p style="color: blue;">你也可以试试拉伸浏览器窗口来查看效果哦～ :)</p>

</div>

4、现在你的「模态窗口」就可以正常使用啦！（点击测试）

历史上的今天

2014年：Linux技巧：screen指令使用教学（4条评论）

觉得这篇文章有用吗？分享一下让更多人受益吧！

本文固定链接：https://www.arefly.com/zh-hans/html-css-modal/

预览

教学

历史上的今天

觉得这篇文章有用吗？分享一下让更多人受益吧！

您可能还会对这些文章感兴趣！