19种漂亮的模态对话框效果

漂亮的模态对话框效果，包括滑动，渐变，3D，旋转，叠加，背景模糊等19种效果。使用 CSS 过渡和动画实现。

对话框的实现有无限的可能性，下面提供一些创意灵感，使用 CSS 过渡和动画实现。

在 iOS <6 的 Safari 中不透明度有一些已知问题。

HTML

模态窗口的结构由外部容器和内容部分组成：

<div class="md-modal md-effect-1" id="modal-1">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
				<li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>

...

<div class="md-overlay"></div>

CSS

外围容器主要用于简单地显示或隐藏（显示使用 md-show 类），并且内部的内容使用过渡。叠加放置在模态窗口之后，所以我们可以使用相邻的兄弟选择器控制外观：

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	backface-visibility: hidden;
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(143,27,15,0.8);
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

有一些效果，我们还将添加一个类到 html 元素。我们希望在外部容器和内容上创建一些 3D 效果。请注意，我们假设页面的所有内容（模态窗口和覆盖图除外）都包装在容器中：

.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-perspective body  {
	background: #222;
	perspective: 600px;
}

.container {
	background: #e74c3c;
	min-height: 100%;
}

为了能够控制每个效果，我们使用一个附加的效果类来定义这个具体的模态窗口想要的过渡效果。其中一个效果的示例如下：

/* Effect 5: newspaper */
.md-show.md-effect-5 ~ .md-overlay {
	background: rgba(0,127,108,0.8);
}

.md-effect-5 .md-content {
	transform: scale(0) rotate(720deg);
	opacity: 0;
	transition: all 0.5s;
}

.md-show.md-effect-5 .md-content {
	transform: scale(1) rotate(0deg);
	opacity: 1;
}

触发按钮将需要有一个 data- 属性，其中包含我们要显示的模式框的引用：

<button class="md-trigger" data-modal="modal-5">Newspaper</button>

对于特殊的透视情况，我们还会将 md-setperspective 类添加到触发按钮。

使用 JavaScript ，可以简单地将 md-show 类添加到相应的模态窗，当我们点击一个按钮时，如果有指定，则将 md-perspective 类添加到 html 元素。

要尝试新的效果，请添加一个新的按钮和一个具有效果类和ID的新模态窗口，并在按钮的数据属性 data-modal 中引用该 ID。然后，你可以为该特定效果添加另一组样式。

如果你只想在模态窗口出现时显示 effect/transition 效果，而不是当它消失时，只需将 transition 添加到 .md-show.md-effect-x
.md-content （就像上面的例子一样）。

对于背景模糊效果，这里使用 Polyfilter 来支持旧版浏览器。