jQuery Bootstrap 自定义模态效果

Bootstrap Custom Modal Effect

提问by tim

I'm creating a website with Bootstrap. I stumbled upon this superb modal effect that I want to integrate in my website. However I have not found any information on how to do this.

我正在使用 Bootstrap 创建一个网站。我偶然发现了这个极好的模态效果，我想将它集成到我的网站中。但是，我还没有找到有关如何执行此操作的任何信息。

See: http://tympanus.net/Development/ModalWindowEffects/

请参阅：http: //tympanus.net/Development/ModalWindowEffects/

In particular effect 18: 'Make Way' The CSS for the effect:

特别是效果 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 Page

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>

回答by Mohamed Amged

just add this to your css and it will work

只需将此添加到您的 css 中，它就会起作用

.modal {
    /*! adjust transition time */
    -webkit-transition: all ease-out !important;
    -moz-transition: all 0.3s ease-out !important;
    -o-transition: all 0.3s ease-out !important;
    transition: all 0.3s ease-out !important;
}
.modal.in .modal-dialog {
    /*! editthis transform to any transform you want */
    -webkit-transform: scale(1, 1) !important;
    -ms-transform: scale(1, 1) !important;
    transform: scale(1, 1) !important;
}
.modal.fade .modal-dialog {
    /*! disable sliding from left/right/top/bottom */
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

回答by melc

For the particular effect you need the following part of code, as found in the downloaded source code of the article (http://tympanus.net/Development/ModalWindowEffects/ModalWindowEffects.zip),

对于特定效果，您需要以下部分代码，如文章的下载源代码（http://tympanus.net/Development/ModalWindowEffects/ModalWindowEffects.zip），

http://jsfiddle.net/uqR3s/

http://jsfiddle.net/uqR3s/

HTML

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

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;
    }
}
/* 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, 27, 15, 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, 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

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

})();

回答by Uday Hiwarale

I am using scale() here, you can use your custome css animation Add this to bootstrap css file at the end

我在这里使用 scale() ，您可以使用您的自定义 css 动画 最后将此添加到 bootstrap css 文件

.modal.fade .modal-dialog {
  -webkit-transform: scale(1.1,1.1) !important;
      -ms-transform: scale(1.1,1.1) !important;
          transform: scale(1.1,1.1) !important;
  -webkit-transition: -webkit-transform 0.3s ease-out !important;
     -moz-transition: -moz-transform 0.3s ease-out !important;
       -o-transition: -o-transform 0.3s ease-out !important;
          transition: transform 0.3s ease-out !important;
}