Effet modal personnalisé de bootstrap

Pour l'effet particulier, vous avez besoin de la partie suivante du code, comme indiqué dans le code source téléchargé de l'article ( http://tympanus.net/development/modalwindoweffects/modalwindoweffects.zip em>),

http://jsfiddle.net/uqr3s/ p>

HTML strong> p>

/*!
 * 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();

})();

J'utilise l'échelle () ici, vous pouvez utiliser votre animation CSS personnalisée. Ajoutez ceci au fichier BOOTSTRAP CSS à la fin

.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;
}

Il suffit d'ajouter ceci à votre CSS et il fonctionnera

.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);
}