超酷的模态框效果 - Nifty
dreamweaver免费视频教程：http://www.51rgb.com/mproductzh.aspx?classid=31加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货！
超酷的模态框效果 - Nifty
是一个CSS3实现的模态框，包含多种方式弹出效果。
用法
首先我们将下面元素添加到body中
<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>
该效果主要是通过 CSS3完成的，以下是相关的CSS代码：
.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;
}
.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;
}
注意，该效果只能在现代浏览器中使用，不支持老版本的浏览器，请根据自己的需求使用。
===========以下代码由 create_time 提供===============
楼上的方法缺了，我在这里补上，如何更改，里面的颜色，component.css,里面的，.md-trigger 是通用的样式，如果要，又多样式得自己拓展。引入你下载的js文件，和css文件，里面的，default是布局样式，component.css按钮样式。
代码压缩包下载地址：
51RGB
只看文字怎么够，51小编给你准备了大量免费课程视频 0基础起步 打开即看不啰嗦
视频直达网址：http://www.51rgb.com/mproductzh.aspx?classid=31
站内还有PS AI 各种一线软件课程