jschr/bootstrap-modal

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 modal addresses some of the bigger issues and is not worth maintaining two versions of this plugin., _(*1)

Bootstrap Modal v2.2.6

See live demo here., _(*2)

Extends Bootstrap's native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events., _(*3)

A single ModalManager is created by default on body and can be accessed through the jQuery plugin interface., _(*4)

    $('body').modalmanager('loading');

Bootstrap-Modal can be used as a replacement for Bootstrap's Modal class or as a patch to the library., _(*5)

Bootstrap 3

If you're using BS3, I've provided a compatible css patch. Include bootstrap-modal-bs3patch.css before the main bootstrap-modal.css file to use this plugin with Bootstrap 3., _(*6)

If you're using the loading spinner functionality you may also need to change the default template to be compatible in js:, _(*7)

    $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner = 
        '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
            '<div class="progress progress-striped active">' +
                '<div class="progress-bar" style="width: 100%;"></div>' +
            '</div>' +
        '</div>';

Overview

• Backwards compatible
• Responsive
• Stackable
• Full width
• Load content via AJAX
• Disable background scrolling

Installation

• Include css/bootstrap-modal.css after the main bootstrap css files.
• Include js/bootstrap-modalmanager.js and js/bootstrap-modal.js after the main bootstrap js files.

    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="css/bootstrap-modal.css" rel="stylesheet" />

    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-modalmanager.js"></script>
    <script src="js/bootstrap-modal.js"></script>

Options

In addition to the standard bootstrap options, you now have access to the following options, _(*8)

Modal, _(*9)

• width Set the initial width of the modal., _(*10)

• height Set the initial height of the modal., _(*11)

• maxHeight Set the max-height of the modal-body., _(*12)

• loading Toggle the loading state., _(*13)

• spinner Provide a custom image or animation for the loading spinner., _(*14)

• backdropTemplate Provide a custom modal backdrop., _(*15)

• consumeTab Used to enable tabindexing for modals with data-tabindex. This is set to true by default., _(*16)

• focusOn The element or selector to set the focus to once the modal is shown., _(*17)

• replace If set to true, the modal will replace the topmost modal when opened., _(*18)

• attentionAnimation Set the animation used by the attention method. Any animation in animate.css is supported but only the shake animation is included by default., _(*19)

• modalOverflow Set this property to true for modals with highly dynamic content. This will force the modal to behave as if it is larger than the viewport., _(*20)

• manager Set the modal's manager. By default this is set to the GlobalModalManager and will most likely not need to be overridden., _(*21)

ModalManager, _(*22)

• loading Toggle the loading state., _(*23)

• backdropLimit Limit the amount of backdrops that will appear on the page at the same time., _(*24)

• spinner Provide a custom image or animation for the loading spinner., _(*25)

• backdropTemplate Provide a custom modalmanager backdrop. This backdrop is used when $element.modalmanager('loading') is called., _(*26)

Getting a reference to the modal manager

If you did not created your own ModalManager, perhaps you'll need a reference to it. That can be easily accomplished using the following snippet:, _(*27)

    var modalManager = $("body").data("modalmanager");
    var openModals = modalManager.getOpenModals();
    modalManager.removeLoading();

After that, you'll be able to call any methods that modal manager has, such as:, _(*28)

• removeLoading (remove the loading and backdrop window);
• getOpenModals (to get the modals that are already open);
• etc;

Disable Background Scrolling

If you want to prevent the background page from scrolling (see demo for example) you must wrap the page contents in a <div class="page-container">. For example:, _(*29)

    <body>
       <div class="page-container">
          <div class="navbar navbar-fixed-top">...</div>
          <div class="container">...</div>
       </div>
    </body>

The reason for doing this instead of just simply setting overflow: hidden when a modal is open is to avoid having the page shift as a result of the scrollbar appearing/disappearing. This also allows the document to be scrollable when there is a tall modal but only to the height of the modal, not the entire page., _(*30)

Constrain Modal to Window Size

You can bind the height of the modal body to the window with something like this:, _(*31)

    $.fn.modal.defaults.maxHeight = function(){
        // subtract the height of the modal header and footer
        return $(window).height() - 165; 
    }

Note: This will be overwritten by the responsiveness and is only set when the modal is displayed, not when the window is resized., _(*32)

Tab Index for Modal Forms

You can use data-tabindex instead of the default tabindex to specify the tabindex within a modal., _(*33)

    <input type="text" data-tabindex="1" />
    <input type="text" data-tabindex="2" />

See the stackable example on the demo page for an example., _(*34)

, _(*35)