jquery – Bootstrap自定义模态效果

我正在用Bootstrap创建一个网站.我偶然发现了我想要整合到我的网站中的这种极好的模态效果.但是我没有找到任何关于如何做到这一点的信息.

看到：
http://tympanus.net/Development/ModalWindowEffects/

特别效果18：’Make Way’
效果的CSS：

/* 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">&times;</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)中所示,

http://jsfiddle.net/uqR3s/

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();

})();