純CSS爲網頁加入模態窗口（模態對話框）教學

7 月102015

作者：超級efly 發布：2015-07-10 15:13 分類：網絡閱讀：8,437

相信大家近期在訪問暢想資源時都發現在看了文章主體部分後會自動於網頁上顯示一內容爲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-hant/html-css-modal/

預覽

教學

歷史上的今天

覺得這篇文章有用嗎？分享一下讓更多人受益吧！

您可能還會對這些文章感興趣！