我正在用Bootstrap创建一个网站.我偶然发现了我想要整合到我的网站中的这种极好的模态效果.但是我没有找到任何关于如何做到这一点的信息.
看到：
http://tympanus.net/Development/ModalWindowEffects/
/* 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(143,27,15,0.8);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-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;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-o-animation: rotateRightSideFirst 0.5s forwards ease-in;
animation: rotateRightSideFirst 0.5s forwards ease-in;
}
@-webkit-keyframes rotateRightSideFirst {
50% {
-webkit-transform: translateZ(-50px) rotateY(5deg);
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@-moz-keyframes rotateRightSideFirst {
50% {
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
-webkit-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
-webkit-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-50px) rotateY(5deg); -ms-transform: translateZ(-50px) rotateY(5deg); -o-transform: translateZ(-50px) rotateY(5deg); -webkit-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); -ms-transform: translateZ(-200px); -o-transform: translateZ(-200px); -webkit-transform: translateZ(-200px); transform: translateZ(-200px); }
}
.md-effect-18 .md-content {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-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);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}
HTML页面
<div class="modal fade" id="AddGameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">Woowie! Not so fast</h2>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<h4>Remember!</h4>
<p>You have to have the physical game in order to complete a share,no digital copies allowed.</p>
</div>
<h2>Please confirm you have entered the right game:</h2>
<div id="ConfirmDetails">
<h3>Title of the game</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Suspendisse sit amet luctus sapien,ut lacinia felis. Sed adipiscing vitae orci at porttitor. Integer ullamcorper et risus vel interdum. Nulla rutrum,lectus quis vestibulum mollis,lectus nisi dapibus mi,at dapibus leo augue non dolor. Sed nec felis porttitor,bibendum augue sit amet,euismod tellus. Vivamus suscipit,purus id luctus dapibus,dui mauris ultricies orci,quis lacinia neque elit nec nisl. Pellentesque suscipit urna in nibh venenatis,a aliquet arcu mattis. Integer ultricies ipsum justo,eget interdum arcu auctor id. Donec ultricies sem quam,sed egestas turpis adipiscing quis. Maecenas sit amet faucibus nisl,nec tempus nulla. Maecenas porta lectus mi,non commodo odio suscipit et. Etiam ultrices neque et adipiscing tristique.</p>
<p>Platform of the game</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Oh damn wrong one!</button>
<button type="button" class="btn btn-success">Yes that's the one mate </button>
</div>
</div>
</div>
</div>
解决方法
对于特定的效果,您需要以下部分代码,如下载的文章源代码(
http://tympanus.net/Development/ModalWindowEffects/ModalWindowEffects.zip)中所示,
HTML
<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>
<button class="md-trigger md-setperspective" data-modal="modal-18">Make way!</button>
<div class="md-overlay"></div>
<!-- the overlay element -->
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.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,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,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',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.1);
}
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
/* 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: #222;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
}
.container {
background: #e74c3c;
min-height: 100%;
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.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,0.8);
-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: #fff;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.md-content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0.1);
border-radius: 3px 3px 0 0;
}
.md-content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.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;
}
.md-content button {
display: block;
margin: 0 auto;
font-size: 0.8em;
}
.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;
}
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); /** * 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(); })();
原文地址：https://www.jb51.cc/jquery/175651.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
