1.组件结构
2.模态框多种弹出效果(演示页)
index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>模态框多种弹出效果</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/component.css" rel="stylesheet">
</head>
<body>
<div style="1000px; height:500px; padding-left:450px;">
<table class="table" style=" background-color:#FC9">
<thead>
<tr>
<th style="30%;">Modal Type</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td class="middle-align">Fade in & Scale</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Slide in (right)</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-2">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Slide in (bottom)</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-3">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Newspaper</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-4">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Fall</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-5">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Side Fall</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-6">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Sticky Up</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-7">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">3D Flip (horizontal)</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-8">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">3D Flip (vertical)</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-9">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">3D Sign</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-10">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Super Scaled</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-11">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">Just Me</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-12">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">3D Slit</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-13">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">3D Rotate Bottom</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-14">Show Me</a></td>
</tr>
<tr>
<td class="middle-align">3D Rotate In Left</td>
<td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-15">Show Me </a></td>
</tr>
</tbody>
</table>
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-2" id="modal-2">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-3" id="modal-3">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-4" id="modal-4">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-5" id="modal-5">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-6" id="modal-6">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-7" id="modal-7">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-8" id="modal-8">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-9" id="modal-9">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-10" id="modal-10">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-11" id="modal-11">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-12" id="modal-12">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-13" id="modal-13">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-14" id="modal-14">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-15" id="modal-15">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-16" id="modal-16">
<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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
<div class="md-overlay"></div>
<!-- the overlay element -->
</div>
<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>
</body>
</html>
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/bonzo
function 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 once
var 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
};
// transport
if ( 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 effects
Note 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%;
50%;
max- 550px;
min- 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;
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- 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: <a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1">Show Me</a>
* overlay: 遮罩层
* modal:
<div class="md-modal md-effect-1 md-show" 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 they say.</li>
<li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button>
</div>
</div>
</div>
*/
/**
* 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Document</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/component.css" rel="stylesheet"> </head> <body> <!-- 触发弹窗元素 --> <a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1">Show Me</a> <!-- 弹窗(modal) --> <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 they say.</li> <li><strong>Look:</strong> a modal window enjoys 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 btn-sm btn-primary">Close me!</button> </div> </div> </div> <!-- 遮罩层 --> <div class="md-overlay"></div> <script src="js/classie.js"></script> <script src="js/modalEffects.js"></script> </body> </html>
.