标签：
系统自带的弹出框 总结 链接 http://blog.csdn.net/anhuidelinger/article/details/17024491
参考这个网站学习模态框的动态弹出 http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/，网站提供打包好的资源下载。
<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>
通过js来控制 .md-modal 元素的classs来实现模态框的动画效果。
文中没有引用jquery 而是对原生js进行封装得到个classie对象；
* classie.has( elem, ‘my-class‘ ) -> true/false 布尔值 根据元素是否含有指定的classname(my-class)来做出判断 * classie.add( elem, ‘my-new-class‘ ) -> 为元素加上classname(my-new-class) * classie.remove( elem, ‘my-unwanted-class‘ )-> 为元素删除classname(my-unwanted-class) *classie.toggle( elem, ‘my-class‘ ) -> 元素切换classname（my-class），如果元素含有这个class则删除，没有则添加。
创造这个对象时用到一个 classList 属性。这个家伙竟然是原生的 ,它的构造器是DOMTokenList，它提供了这些已知的API：length、item、add、remove、contains、toggle。请在控制台中查看这个神奇的东西，document.body.classList!
js 部分 中的动态为一个元素（文中是div.md-overlay）添加时间，element.addEventListener(“eventString”,callBack),要在开始前先移除元素本身的事件，因为addEventListener方法可以为元素绑定相同事件多次。
这点jquery中的事件的绑定方式和这个是一样的，都需要先移除一次时间在绑定。
css中主要用到了transition过渡属性，通过控制 transfrom( translate scale rotate ) transform-style:perspective-3d opacity 等属性来控制元素的显示
3d中perspective 视距的运用以及3d时的z轴距离，在3轴上的deg问题（从每个轴的正向看回去，正角度代表顺时针，负角度代表逆时针）
/* 最后几个效果需要3d效果，需要用到perspective属性 该属性定义3d元素距视图的距离，以像素计 */
.md-perspective body { background: #222; -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; } .md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);/* 是元素居中 */ }
/* transition 过渡属性 */
.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); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;/* 过渡，所有属性 0,3miao */ }
/* 通过给div.md-modal添加md-show,根据这个选择器来控制div.md-overlay的显示。 visibility:hidden的元素虽然在某些元素的上面但是不妨碍这些元素的事件 */
.md-show ~ .md-overlay { opacity: 1; visibility: visible; }
---------不考虑兼容性------ （transform、transition）
效果一：淡入，放大。
css:
.md-effect-1 .md-content { transform: scale(0.7); opacity: 0; transition: all 0.3s;
/* transiton-property:opacity,transform;transition-duration:0.3s;transiton-timing-function:ease;transition-delay:0; */ } .md-show.md-effect-1 .md-content { transform: scale(1); opacity: 1; } 效
效果二：从右边滑入。
css: .
md-effect-2 .md-content {
transform: translateX(20%);
opacity: 0;
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
/* transiton-property:opacity,transform;transition-duration:0.3s;transiton-timing-function:cubic-bezier(0.25,0,5,0,5,0.9);transition-delay:0; */
}
.md-show.md-effect-2 .md-content {
transform: translateX(0);
opacity: 1;
}
效果三：从下滑入
css：
.md-effect-3 .md-content {
opacity: 0;
transition: all 0.3s;/* 同上 */
}
.md-show.md-effect-3 .md-content {
transform: translateY(0);
opacity: 1;
}
效果四：新闻类（旋转进入，从小变大）
css
.md-effect-4 .md-content {
transform: scale(0) rotate(720deg);/* 旋转720度 正数顺时针，负数逆时针 */
opacity: 0;
}
.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
transition: all 0.5s;/* transition-property:transform,opacity;transition-duration:0.5s;transition-timing-function:ease;transtion-delay:0;*/
}
.md-show.md-effect-4 .md-content {
transform: scale(1) rotate(0deg);
opacity: 1;
}
效果五：下落
css
.md-effect-5.md-modal {
perspective: 1300px;/* 设置视距1300px */
}
.md-effect-5 .md-content {
transform-style: preserve-3d;/* transform样式 flat 子元素将不保留期3位置 perspective-3d 子元素保留3d位置 */
transform: translateZ(600px) rotateX(20deg); /* 初始时z轴正向位置600px（垂直于屏幕方向，靠近我们的一侧为z轴正向） x轴正向看过去（在屏幕上从左向右看过去）顺时针旋转20度 */
opacity: 0;
}
.md-show.md-effect-5 .md-content {
transition: all 3s ease-in;
transform: translateZ(0px) rotateX(0deg);
opacity: 1;
}
效果六：滑入和滑落结合
css
.md-effect-6.md-modal {
perspective: 1300px;
}
.md-effect-6 .md-content {
transform-style: preserve-3d;
transform: translate(30%) translateZ(600px) rotate(10deg); /* translate（30%）->translateX(30%);translateY(30%),同理 rotate（） */
opacity: 0;
}
.md-show.md-effect-6 .md-content {
transition: all 3s ease-in;
transform: translate(0%) translateZ(0) rotate(0deg);
opacity: 1;
}
效果七：滑入并且固定在屏幕上方
css
.md-effect-7{
top: 0;
transform: translateX(-50%);
}
.md-effect-7 .md-content {
transform: translateY(-200%);
transition: all .3s;
/* translateX(-50% - > 0);translateY(-200% -> 0) opaacity(0 -> 1) border-bottom-right(0 -> 3px) border-bottom-left(0 -> 3px)*/
opacity: 0;
}
.md-show.md-effect-7 .md-content {
transform: translateY(0%);
border-radius: 0 0 3px 3px;
opacity: 1;
}
效果八：水平翻转
css
.md-effect-8.md-modal {
perspective: 1300px;
}
.md-effect-8 .md-content {
transform-style: preserve-3d;
transform: rotateY(-70deg);/* 从y轴正向看去逆时针转70度 */
transition: all 0.3s;
opacity: 0;
}
.md-show.md-effect-8 .md-content {
transform: rotateY(0deg);
opacity: 1;
}
效果九：垂直翻转
css
.md-effect-9.md-modal {
perspective: 1300px;
}
.md-effect-9 .md-content {
transform-style: preserve-3d;
transform: rotateX(-70deg);/* 从X轴正向看去逆时针转70度*/
transition: all 0.3s;
opacity: 0;
}
.md-show.md-effect-9 .md-content {
transform: rotateX(0deg);
opacity: 1;
}
效果十：3d 转入
css
.md-effect-10.md-modal {
perspective: 1300px;
}
.md-effect-10 .md-content {
transform-style: preserve-3d;
transform: rotateX(-60deg);
transform-origin: 50% 0; /* 规定原点位置 在元素上边的中点为原点 */
opacity: 0;
transition: all 0.3s;
}
.md-show.md-effect-10 .md-content {
transform: rotateX(0deg);
opacity: 1;
}
标签：
原文地址：http://www.cnblogs.com/pipu-qiao/p/5680674.html
