1.组件结构

2.模态框多种弹出效果(演示页)

index.html

     
     
     
     
     
     
     
  
      
           
              
                 
Modal Type
                 
Example
              
           
           
              
                 
Fade in & Scale
                 
Show Me
              
              
                 
Slide in (right)
                 
Show Me
              
              
                 
Slide in (bottom)
                 
Show Me
              
              
                 
Newspaper
                 
Show Me
              
              
                 
Fall
                 
Show Me
              
              
                 
Side Fall
                 
Show Me
              
              
                 
Sticky Up
                 
Show Me
              
              
                 
3D Flip (horizontal)
                 
Show Me
              
              
                 
3D Flip (vertical)
                 
Show Me
              
              
                 
3D Sign
                 
Show Me
              
              
                 
Super Scaled
                 
Show Me
              
              
                 
Just Me
                 
Show Me
              
              
                 
3D Slit
                 
Show Me
              
              
                 
3D Rotate Bottom
                 
Show Me
              
              
                 
3D Rotate In Left
                 
Show Me 
              
           
        
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
    
       
      
        
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 they say.
          
          
Look: a modal window enjoys 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!      
        
    
       
  
      
  
      
  
         
     

 

css类名操作js封装

classie.js

/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo *  * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) *//*jshint browser: true, strict: true, undef: true *//*global define: false */( function( window ) {'use strict';// class helper functions from bonzo https://github.com/ded/bonzofunction classReg( className ) {  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");}// classList support for class management// altho to be fair, the api sucks because it won't accept multiple classes at oncevar hasClass, addClass, removeClass;if ( 'classList' in document.documentElement ) {  hasClass = function( elem, c ) {    return elem.classList.contains( c );  };  addClass = function( elem, c ) {    elem.classList.add( c );  };  removeClass = function( elem, c ) {    elem.classList.remove( c );  };}else {  hasClass = function( elem, c ) {    return classReg( c ).test( elem.className );  };  addClass = function( elem, c ) {    if ( !hasClass( elem, c ) ) {      elem.className = elem.className + ' ' + c;    }  };  removeClass = function( elem, c ) {    elem.className = elem.className.replace( classReg( c ), ' ' );  };}function toggleClass( elem, c ) {  var fn = hasClass( elem, c ) ? removeClass : addClass;  fn( elem, c );}var classie = {  // full names  hasClass: hasClass,  addClass: addClass,  removeClass: removeClass,  toggleClass: toggleClass,  // short names  has: hasClass,  add: addClass,  remove: removeClass,  toggle: toggleClass};// transportif ( typeof define === 'function' && define.amd ) {  // AMD  define( classie );} else {  // browser global  window.classie = classie;}})( window );

 

弹窗组件样式

component.css

/* General styles for the modal *//* Styles for the html/body for special modal where we want 3d effectsNote that we need a container wrapping all content on the page for the perspective effects (not including the modals and the overlay).*/.md-perspective,.md-perspective body {	height: 100%;	overflow: hidden;}.md-perspective body  {	background: #fff;	-webkit-perspective: 600px;	-moz-perspective: 600px;	perspective: 600px;}.container {	min-height: 100%;}.md-modal {	position: fixed;	top: 50%;	left: 50%;	width: 50%;	max-width: 550px;	min-width: 320px;	height: auto;	z-index: 9999999;	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%);}.md-show {	visibility: visible;}.md-overlay {	position: fixed;	width: 100%;	height: 100%;	visibility: hidden;	top: 0;	left: 0;	z-index: 9999995;	opacity: 0;	background: rgba(1,1,1,0.6);	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;}.md-show ~ .md-overlay {	opacity: 1;	visibility: visible;}/* Content styles */.md-content {	color: #5b5b5b;	background: #fff;	position: relative;	border-radius: 0px;	margin: 0 auto;}.md-content .md-close-btn {	position: absolute;	top: 10px;	right: 5px;	z-index: 999999;}.md-content .md-close-btn a{	color: #909090;	cursor: pointer;}.md-content .md-close-btn a:hover{	color: #212121;}.md-content .md-close {	font-size: 13px;}.md-content h3 {	font-size: 16px;	font-weight: 600;	margin: 0;	padding: 20px;	text-align: center;	background: #fff;	border-radius: 0;	color: #797979;}.md-content > div {	padding: 15px 40px 30px;	margin: 0;	font-weight: 300;	font-size: 14px;}.md-content > div p {	margin: 0;	padding: 10px 0;}.md-content > div ul {	margin: 0;	padding: 0 0 30px 20px;}.md-content > div ul li {	padding: 5px 0;}/* Individual modal styles with animations/transitions *//* Effect 1: Fade in and scale up */.md-effect-1 .md-content {	-webkit-transform: scale(0.7); 	-moz-transform: scale(0.7); 	-ms-transform: scale(0.7); 	transform: scale(0.7);	opacity: 0;	-webkit-transition: all 0.3s; 	-moz-transition: all 0.3s; 	transition: all 0.3s;}.md-show.md-effect-1 .md-content {	-webkit-transform: scale(1); 	-moz-transform: scale(1); 	-ms-transform: scale(1); 	transform: scale(1);	opacity: 1;}/* Effect 2: Slide from the right */.md-effect-2 .md-content {	-webkit-transform: translateX(20%);	-moz-transform: translateX(20%);	-ms-transform: translateX(20%);	transform: translateX(20%);	opacity: 0;	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);}.md-show.md-effect-2 .md-content {	-webkit-transform: translateX(0);	-moz-transform: translateX(0);	-ms-transform: translateX(0);	transform: translateX(0);	opacity: 1;}/* Effect 3: Slide from the bottom */.md-effect-3 .md-content {	-webkit-transform: translateY(20%);	-moz-transform: translateY(20%);	-ms-transform: translateY(20%);	transform: translateY(20%);	opacity: 0;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;}.md-show.md-effect-3 .md-content {	-webkit-transform: translateY(0);	-moz-transform: translateY(0);	-ms-transform: translateY(0);	transform: translateY(0);	opacity: 1;}/* Effect 4: Newspaper */.md-effect-4 .md-content {	-webkit-transform: scale(0) rotate(720deg);	-moz-transform: scale(0) rotate(720deg);	-ms-transform: scale(0) rotate(720deg);	transform: scale(0) rotate(720deg);	opacity: 0;}.md-show.md-effect-4 ~ .md-overlay,.md-effect-4 .md-content {	-webkit-transition: all 0.5s;	-moz-transition: all 0.5s;	transition: all 0.5s;}.md-show.md-effect-4 .md-content {	-webkit-transform: scale(1) rotate(0deg);	-moz-transform: scale(1) rotate(0deg);	-ms-transform: scale(1) rotate(0deg);	transform: scale(1) rotate(0deg);	opacity: 1;}/* Effect 5: fall */.md-effect-5.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-5 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: translateZ(600px) rotateX(20deg); 	-moz-transform: translateZ(600px) rotateX(20deg); 	-ms-transform: translateZ(600px) rotateX(20deg); 	transform: translateZ(600px) rotateX(20deg); 	opacity: 0;}.md-show.md-effect-5 .md-content {	-webkit-transition: all 0.3s ease-in;	-moz-transition: all 0.3s ease-in;	transition: all 0.3s ease-in;	-webkit-transform: translateZ(0px) rotateX(0deg);	-moz-transform: translateZ(0px) rotateX(0deg);	-ms-transform: translateZ(0px) rotateX(0deg);	transform: translateZ(0px) rotateX(0deg); 	opacity: 1;}/* Effect 6: side fall */.md-effect-6.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-6 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: translate(30%) translateZ(600px) rotate(10deg); 	-moz-transform: translate(30%) translateZ(600px) rotate(10deg);	-ms-transform: translate(30%) translateZ(600px) rotate(10deg);	transform: translate(30%) translateZ(600px) rotate(10deg); 	opacity: 0;}.md-show.md-effect-6 .md-content {	-webkit-transition: all 0.3s ease-in;	-moz-transition: all 0.3s ease-in;	transition: all 0.3s ease-in;	-webkit-transform: translate(0%) translateZ(0) rotate(0deg);	-moz-transform: translate(0%) translateZ(0) rotate(0deg);	-ms-transform: translate(0%) translateZ(0) rotate(0deg);	transform: translate(0%) translateZ(0) rotate(0deg);	opacity: 1;}/* Effect 7:  slide and stick to top */.md-effect-7{	top: 0;	-webkit-transform: translateX(-50%);	-moz-transform: translateX(-50%);	-ms-transform: translateX(-50%);	transform: translateX(-50%);}.md-effect-7 .md-content {	-webkit-transform: translateY(-200%);	-moz-transform: translateY(-200%);	-ms-transform: translateY(-200%);	transform: translateY(-200%);	-webkit-transition: all .3s;	-moz-transition: all .3s;	transition: all .3s;	opacity: 0;}.md-show.md-effect-7 .md-content {	-webkit-transform: translateY(0%);	-moz-transform: translateY(0%);	-ms-transform: translateY(0%);	transform: translateY(0%);	border-radius: 0 0 3px 3px;	opacity: 1;}/* Effect 8: 3D flip horizontal */.md-effect-8.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-8 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: rotateY(-70deg);	-moz-transform: rotateY(-70deg);	-ms-transform: rotateY(-70deg);	transform: rotateY(-70deg);	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;	opacity: 0;}.md-show.md-effect-8 .md-content {	-webkit-transform: rotateY(0deg);	-moz-transform: rotateY(0deg);	-ms-transform: rotateY(0deg);	transform: rotateY(0deg);	opacity: 1;}/* Effect 9: 3D flip vertical */.md-effect-9.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-9 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: rotateX(-70deg);	-moz-transform: rotateX(-70deg);	-ms-transform: rotateX(-70deg);	transform: rotateX(-70deg);	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;	opacity: 0;}.md-show.md-effect-9 .md-content {	-webkit-transform: rotateX(0deg);	-moz-transform: rotateX(0deg);	-ms-transform: rotateX(0deg);	transform: rotateX(0deg);	opacity: 1;}/* Effect 10: 3D sign */.md-effect-10.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-10 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: rotateX(-60deg);	-moz-transform: rotateX(-60deg);	-ms-transform: rotateX(-60deg);	transform: rotateX(-60deg);	-webkit-transform-origin: 50% 0;	-moz-transform-origin: 50% 0;	transform-origin: 50% 0;	opacity: 0;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;}.md-show.md-effect-10 .md-content {	-webkit-transform: rotateX(0deg);	-moz-transform: rotateX(0deg);	-ms-transform: rotateX(0deg);	transform: rotateX(0deg);	opacity: 1;}/* Effect 11: Super scaled */.md-effect-11 .md-content {	-webkit-transform: scale(2);	-moz-transform: scale(2);	-ms-transform: scale(2);	transform: scale(2);	opacity: 0;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;}.md-show.md-effect-11 .md-content {	-webkit-transform: scale(1);	-moz-transform: scale(1);	-ms-transform: scale(1);	transform: scale(1);	opacity: 1;}/* Effect 12:  Just me */.md-effect-12 .md-content {	-webkit-transform: scale(0.8);	-moz-transform: scale(0.8);	-ms-transform: scale(0.8);	transform: scale(0.8);	opacity: 0;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;}.md-show.md-effect-12 ~ .md-overlay {	background: rgba(255,255,255,1);} .md-effect-12 .md-content h3,.md-effect-12 .md-content {	background: transparent;}.md-show.md-effect-12 .md-content {	-webkit-transform: scale(1);	-moz-transform: scale(1);	-ms-transform: scale(1);	transform: scale(1);	opacity: 1;}/* Effect 13: 3D slit */.md-effect-13.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-13 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: translateZ(-3000px) rotateY(90deg);	-moz-transform: translateZ(-3000px) rotateY(90deg);	-ms-transform: translateZ(-3000px) rotateY(90deg);	transform: translateZ(-3000px) rotateY(90deg);	opacity: 0;}.md-show.md-effect-13 .md-content {	-webkit-animation: slit .7s forwards ease-out;	-moz-animation: slit .7s forwards ease-out;	animation: slit .7s forwards ease-out;}@-webkit-keyframes slit {	50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}	100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }}@-moz-keyframes slit {	50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}	100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }}@keyframes slit {	50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}	100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }}/* Effect 14:  3D Rotate from bottom */.md-effect-14.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-14 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: translateY(100%) rotateX(90deg);	-moz-transform: translateY(100%) rotateX(90deg);	-ms-transform: translateY(100%) rotateX(90deg);	transform: translateY(100%) rotateX(90deg);	-webkit-transform-origin: 0 100%;	-moz-transform-origin: 0 100%;	transform-origin: 0 100%;	opacity: 0;	-webkit-transition: all 0.3s ease-out;	-moz-transition: all 0.3s ease-out;	transition: all 0.3s ease-out;}.md-show.md-effect-14 .md-content {	-webkit-transform: translateY(0%) rotateX(0deg);	-moz-transform: translateY(0%) rotateX(0deg);	-ms-transform: translateY(0%) rotateX(0deg);	transform: translateY(0%) rotateX(0deg);	opacity: 1;}/* Effect 15:  3D Rotate in from left */.md-effect-15.md-modal {	-webkit-perspective: 1300px;	-moz-perspective: 1300px;	perspective: 1300px;}.md-effect-15 .md-content {	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);	-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);	-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);	transform: translateZ(100px) translateX(-30%) rotateY(90deg);	-webkit-transform-origin: 0 100%;	-moz-transform-origin: 0 100%;	transform-origin: 0 100%;	opacity: 0;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;}.md-show.md-effect-15 .md-content {	-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);	-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);	-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);	transform: translateZ(0px) translateX(0%) rotateY(0deg);	opacity: 1;}/* Effect 16:  Blur */.md-show.md-effect-16 ~ .md-overlay {	background: rgba(1,1,1,0.6);}.md-show.md-effect-16 ~ .container {	-webkit-filter: blur(3px);	-moz-filter: blur(3px);	filter: blur(3px);}.md-effect-16 .md-content {	-webkit-transform: translateY(-5%);	-moz-transform: translateY(-5%);	-ms-transform: translateY(-5%);	transform: translateY(-5%);	opacity: 0;}.md-show.md-effect-16 ~ .container,.md-effect-16 .md-content {	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;}.md-show.md-effect-16 .md-content {	-webkit-transform: translateY(0);	-moz-transform: translateY(0);	-ms-transform: translateY(0);	transform: translateY(0);	opacity: 1;}/* Effect 17:  Slide in from bottom with perspective on container */.md-show.md-effect-17 ~ .container {	height: 100%;	overflow: hidden;	-webkit-transition: -webkit-transform 0.3s;	-moz-transition: -moz-transform 0.3s;	transition: transform 0.3s;}	.md-show.md-effect-17 ~ .container,.md-show.md-effect-17 ~ .md-overlay  {	-webkit-transform: rotateX(-2deg);	-moz-transform: rotateX(-2deg);	-ms-transform: rotateX(-2deg);	transform: rotateX(-2deg);	-webkit-transform-origin: 50% 0%;	-moz-transform-origin: 50% 0%;	transform-origin: 50% 0%;	-webkit-transform-style: preserve-3d;	-moz-transform-style: preserve-3d;	transform-style: preserve-3d;}.md-effect-17 .md-content {	opacity: 0;	-webkit-transform: translateY(200%);	-moz-transform: translateY(200%);	-ms-transform: translateY(200%);	transform: translateY(200%);}.md-show.md-effect-17 .md-content {	-webkit-transform: translateY(0);	-moz-transform: translateY(0);	-ms-transform: translateY(0);	transform: translateY(0);	opacity: 1;	-webkit-transition: all 0.3s 0.2s;	-moz-transition: all 0.3s 0.2s;	transition: all 0.3s 0.2s;}/* Effect 18:  Slide from right with perspective on container */.md-show.md-effect-18 ~ .container {	height: 100%;	overflow: hidden;}.md-show.md-effect-18 ~ .md-overlay {	background: rgba(1,1,1,0.6);	-webkit-transition: all 0.5s;	-moz-transition: all 0.5s;	transition: all 0.5s;}.md-show.md-effect-18 ~ .container,.md-show.md-effect-18 ~ .md-overlay {	-webkit-transform-style: preserve-3d;	-webkit-transform-origin: 0% 50%;	-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;	-moz-transform-style: preserve-3d;	-moz-transform-origin: 0% 50%;	-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;	transform-style: preserve-3d;	transform-origin: 0% 50%;	animation: rotateRightSideFirst 0.5s forwards ease-in;}@-webkit-keyframes rotateRightSideFirst {	50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }	100% { -webkit-transform: translateZ(-200px); }}@-moz-keyframes rotateRightSideFirst {	50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }	100% { -moz-transform: translateZ(-200px); }}@keyframes rotateRightSideFirst {	50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }	100% { transform: translateZ(-200px); }}.md-effect-18 .md-content {	-webkit-transform: translateX(200%);	-moz-transform: translateX(200%);	-ms-transform: translateX(200%);	transform: translateX(200%);	opacity: 0;}.md-show.md-effect-18 .md-content {	-webkit-transform: translateX(0);	-moz-transform: translateX(0);	-ms-transform: translateX(0);	transform: translateX(0);	opacity: 1;	-webkit-transition: all 0.5s 0.1s;	-moz-transition: all 0.5s 0.1s;	transition: all 0.5s 0.1s;}/* Effect 19:  Slip in from the top with perspective on container */.md-show.md-effect-19 ~ .container {	height: 100%;	overflow: hidden;}.md-show.md-effect-19 ~ .md-overlay {	-webkit-transition: all 0.5s;	-moz-transition: all 0.5s;	transition: all 0.5s;}.md-show.md-effect-19 ~ .container,.md-show.md-effect-19 ~ .md-overlay {	-webkit-transform-style: preserve-3d;	-webkit-transform-origin: 50% 100%;	-webkit-animation: OpenTop 0.5s forwards ease-in;	-moz-transform-style: preserve-3d;	-moz-transform-origin: 50% 100%;	-moz-animation: OpenTop 0.5s forwards ease-in;	transform-style: preserve-3d;	transform-origin: 50% 100%;	animation: OpenTop 0.5s forwards ease-in;}@-webkit-keyframes OpenTop {	50% { 		-webkit-transform: rotateX(10deg); 		-webkit-animation-timing-function: ease-out; 	}}@-moz-keyframes OpenTop {	50% { 		-moz-transform: rotateX(10deg); 		-moz-animation-timing-function: ease-out; 	}}@keyframes OpenTop {	50% { 		transform: rotateX(10deg); 		animation-timing-function: ease-out; 	}}.md-effect-19 .md-content {	-webkit-transform: translateY(-200%);	-moz-transform: translateY(-200%);	-ms-transform: translateY(-200%);	transform: translateY(-200%);	opacity: 0;}.md-show.md-effect-19 .md-content {	-webkit-transform: translateY(0);	-moz-transform: translateY(0);	-ms-transform: translateY(0);	transform: translateY(0);	opacity: 1;	-webkit-transition: all 0.5s 0.1s;	-moz-transition: all 0.5s 0.1s;	transition: all 0.5s 0.1s;}@media screen and (max-width: 32em) {	body { font-size: 75%; }}

 

弹窗组件操作js封装

modalEffects.js

// 1.构建闭包 避免全局污染(变量污染) 定义全局变量ModalEffects,并暴露出去,以便创建实例对象调用其私有方法var ModalEffects = (function() {	// 2.编写初始化方法	function init() {		/**		 * 3.Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别：		 * querySelector 在文档内找到第一个符合选择器描述的节点(返回的是一个对象) 例如：document.querySelector("#test");		 * querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身(返回的一个集合(NodeList)) 例如：document.querySelectorAll("#test")[0];		 * jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身		 */		var overlay = document.querySelector( '.md-overlay' ); // 4.找到第一个类名为.md-overlay的节点		/**		 * 5.call、apply和bind 区别:(都是用于改变this的指向)		 * call(): 例1： b.call(a) --> 把b添加到a的环境中(即使this指向b)  例2：b.call(a,1,2) call方法除了第一个参数以外还可以添加多个参数		 * apply(): 例1：b.apply(a) --> apply方法和call方法有些相似，它也可以改变this的指向  例2：b.apply(a,arr)  apply方法的第二个参数必须是一个数组		 * bind(): 例1：bind方法返回的是一个修改过后的函数  例2：bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。		 * 总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。		 */		 /**		  * 6.slice():		  * 语法：arrayObject.slice(start,end)		  * 用法：从已有的数组中返回选定的元素(该方法并不会修改数组，而是返回一个子数组)		  */		[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) { // 7.forEach遍历			// 8.通过属性拼接id,通过id找到元素			var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ), // 当前提示框				close = modal.querySelector( '.md-close' ); // 当前close按钮			function removeModal( hasPerspective ) { // 参数hasPerspective 值为 true/false				/**				 * 12.第四步：清除弹窗(通过清除类名md-show)				.md-show {					visibility: visible;				}				 */				classie.remove( modal, 'md-show' );				// if( hasPerspective ) {				// 	classie.remove( document.documentElement, 'md-perspective' );				// }			}			function removeModalHandler() {				/**				 * 11.第三步：隐藏弹窗(点击close按钮或点击遮罩层都会触发)				 */				removeModal( classie.has( el, 'md-setperspective' ) ); // classie.has( el, 'md-setperspective' ) == false			}			el.addEventListener( 'click', function( ev ) {				/**				 * 9.第一步：监听页面元素点击				 * el 为当前点击的页面元素				 */				classie.add( modal, 'md-show' ); // model为当前弹窗 添加样式 显示弹窗				overlay.removeEventListener( 'click', removeModalHandler ); // overlay 遮罩层  先清除事件监听				overlay.addEventListener( 'click', removeModalHandler ); // 再添加事件监听				/**				 * el: Show Me				 * overlay: 遮罩层				 * modal: 				 	
     
					    
      
					      
       
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 they say.
					          
         
Look: a modal window enjoys 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!					      
       
					    
      
					
     
				 */				/**				 * classie 是闭包函数暴露在外的接口				 * classie 内部封装了多种对类名操作的方法				 * classie 绑定在window对象上				 */				// if( classie.has( el, 'md-setperspective' ) ) { // 判断当前点击的页面元素是否具有 md-setperspective 类名				// 	setTimeout( function() {				// 		// 				// 		console.log(document.documentElement);				// 		classie.add( document.documentElement, 'md-perspective' );				// 	}, 25 );				// }			});			// 监听close按钮			close.addEventListener( 'click', function( ev ) {				/**				 * 10.第二步：监听close按钮点击				 */				ev.stopPropagation(); // 停止事件的传播,阻止它被分派到其他 Document 节点。(阻止冒泡)				removeModalHandler(); // 隐藏弹窗			});		} );	}	init(); // 13.初始化调用})();

 

测试页面

test.html

	
     	
     		
     	
     	
     	Show Me	
     	
     
	    
      
	      
       
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 they say.
	          
         
Look: a modal window enjoys 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!	      
       
	    
      
  	
     
	
     	
     
			

.