以下是 CSS3实现不同交互弹出框代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3实现不同交互弹出框</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<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 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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-17" id="modal-17">
<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">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-18" id="modal-18">
<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">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-19" id="modal-19">
<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">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-20" id="modal-20">
<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">Close me!</button>
</div>
</div>
</div>
<div class="container">
<header>
<h1>Nifty Modal Window Effects <span>Some inspiration for
different modal window appearances</span></h1>
</header>
<div class="main clearfix">
<div class="column">
<p>There are many possibilities for modal overlays to
appear. Here are some modern ways of showing them using CSS
transitions and animations.</p>
</div>
<div class="column">
<button class="md-trigger" data-modal="modal-1">Fade in &
Scale</button>
<button class="md-trigger" data-modal="modal-2">Slide in
(right)</button>
<button class="md-trigger" data-modal="modal-3">Slide in
(bottom)</button>
<button class="md-trigger" data-modal="modal-4">Newspaper</button>
<button class="md-trigger" data-modal="modal-5">Fall</button>
<button class="md-trigger" data-modal="modal-6">Side Fall</button>
<button class="md-trigger" data-modal="modal-7">Sticky Up</button>
<button class="md-trigger" data-modal="modal-8">3D Flip
(horizontal)</button>
<button class="md-trigger" data-modal="modal-9">3D Flip
(vertical)</button>
<button class="md-trigger" data-modal="modal-10">3D Sign</button>
<button class="md-trigger" data-modal="modal-11">Super
Scaled</button>
<button class="md-trigger" data-modal="modal-12">Just Me</button>
<button class="md-trigger" data-modal="modal-13">3D Slit</button>
<button class="md-trigger" data-modal="modal-14">3D Rotate
Bottom</button>
<button class="md-trigger" data-modal="modal-15">3D Rotate
In Left</button>
<button class="md-trigger" data-modal="modal-16">Blur</button>
<button class="md-trigger md-setperspective" data-modal="modal-17">
Let me in</button>
<button class="md-trigger md-setperspective" data-modal="modal-18">
Make way!</button>
<button class="md-trigger md-setperspective" data-modal="modal-19">
Slip from top</button>
</div>
</div>
</div><!-- /container -->
<div class="md-overlay"></div><!-- the overlay element -->
<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>
<script>
// this is important for IEs
var polyfilter_scriptpath = '/js/';
</script>
<script src="js/cssParser.js"></script>
<script src="js/css-filters-polyfill.js"></script>
</body>
</html>
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 );
JS代码(modalEffects.js):
/** * modalEffects.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013,Codrops * http://www.codrops.com */
var ModalEffects = (function(){
function init(){
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el,i ){
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ){
classie.remove( modal,'md-show' );
if( hasPerspective ){
classie.remove( document.documentElement,'md-perspective' );
}
}
function removeModalHandler(){
removeModal( classie.has( el,'md-setperspective' ) );
}
el.addEventListener( 'click',function( ev ){
classie.add( modal,'md-show' );
overlay.removeEventListener( 'click',removeModalHandler );
overlay.addEventListener( 'click',removeModalHandler );
if( classie.has( el,'md-setperspective' ) ){
setTimeout( function(){
classie.add( document.documentElement,'md-perspective' );
}
,25 );
}
}
);
close.addEventListener( 'click',function( ev ){
ev.stopPropagation();
removeModalHandler();
}
);
}
);
}
init();
}
)();
CSS代码(default.css):
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');font-weight:normal;font-style:normal;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body,html{font-size:100%;padding:0;margin:0;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#fff;background:#e74c3c;}
a{color:#c0392b;text-decoration:none;}
a:hover,a:active{color:#333;}
/* Header Style */
.main,.container > header{margin:0 auto;padding:2em;}
.container > header{text-align:center;background:#d94839;padding:3em;}
.container > header h1{font-size:2.625em;line-height:1.3;margin:0;font-weight:300;}
.container > header span{display:block;font-size:60%;opacity:0.7;padding:0 0 0.6em 0.1em;}
/* Main Content */
.main{max-width:69em;}
.column{float:left;width:50%;padding:0 2em;min-height:300px;position:relative;}
.column:nth-child(2){box-shadow:-1px 0 0 rgba(0,0,0,0.1);}
.column p{font-weight:300;font-size:2em;padding:0;margin:0;text-align:right;line-height:1.5;}
/* To Navigation Style */
.codrops-top{background:#fff;background:rgba(255,255,255,0.2);text-transform:uppercase;width:100%;font-size:0.69em;line-height:2.2;}
.codrops-top a{padding:0 1em;letter-spacing:0.1em;display:inline-block;}
.codrops-top a:hover{color:#e74c3c;background:rgba(255,255,255,0.6);}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.codrops-icon:before{font-family:'codropsicons';margin:0 4px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
button{border:none;padding:0.6em 1.2em;background:#c0392b;color:#fff;font-family:'Lato',Calibri,Arial,sans-serif;font-size:1em;letter-spacing:1px;text-transform:uppercase;cursor:pointer;display:inline-block;margin:3px 2px;border-radius:2px;}
button:hover{background:#A5281B;}
@media screen and (max-width:46.0625em){.column{width:100%;min-width:auto;min-height:auto;padding:1em;}
.column p{text-align:left;font-size:1.5em;}
.column:nth-child(2){box-shadow:0 -1px 0 rgba(0,0,0,0.1);}
}
@media screen and (max-width:25em){.codrops-icon span{display:none;}
}
分享到QQ
分享到微博
微信扫一扫
