插件描述：Nifty Modal Window Effects是一个CSS3实现的模态框，包含多种方式弹出效果。

简介

Nifty Modal Window Effects 为我们提供了多种弹出效果的模态框，通过CSS3实现。

用法

首先我们将下面元素添加到body中

    
    
     
        
      
Modal Dialog
        
      
            
       
This is a modal window. You can do the following things with it:
            
       
                
        
Read: Modal windows will probably tell you something important so don't forget to read what it says.
                
        
Look: modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.
                
        
Close: click on the button below to close the modal.
            
       
            
       Close me!        
      
    
     
    
  ...  
    

该效果主要是通过 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;}

注意，该效果只能在现代浏览器中使用，不支持老版本的浏览器，请根据自己的需求使用。