Bootstrap-Modal

Responsive, Stackable, AJAX and more.


Responsive

<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Responsive</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h4>Some Input</h4>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                    </div>
                    <div class="col-md-6">
                        <h4>Some More Input</h4>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                        <p><input class="form-control" type="text"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>

Stackable

<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Stack One</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
                <p>One fine body…</p>
                <p>One fine body…</p>
                <input class="form-control" type="text" data-tabindex="1">
                <input class="form-control" type="text" data-tabindex="2">
                <button class="btn btn-default" data-toggle="modal" href="#stack2">Launch modal</button>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                <button type="button" class="btn btn-primary">Ok</button>
            </div>
        </div>

<div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Stack Two</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
                <p>One fine body…</p>
                <input class="form-control" type="text" data-tabindex="1">
                <input class="form-control" type="text" data-tabindex="2">
                <button class="btn btn-default" data-toggle="modal" href="#stack3">Launch modal</button>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                <button type="button" class="btn btn-primary">Ok</button>
            </div>
        </div>

<div id="stack3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Stack Three</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
                <input class="form-control" type="text" data-tabindex="1">
                <input class="form-control" type="text" data-tabindex="2">
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                <button type="button" class="btn btn-primary">Ok</button>
            </div>
        </div>

AJAX (via jQuery.load)

        var $modal = $('#ajax-modal');

        $('.ajax .demo').on('click', function () {
            // create the backdrop and wait for next modal to be triggered
            $('body').modalmanager('loading');

            setTimeout(function () {
                $modal.load('modal_ajax_test.html', '', function () {
                    $modal.modal();
                });
            }, 1000);
        });

        $modal.on('click', '.update', function () {
            $modal.modal('loading');
            setTimeout(function () {
                $modal
                  .modal('loading')
                  .find('.modal-body')
                    .prepend('<div class="alert alert-info fade in">' +
                      'Updated!<button type="button" class="close" data-dismiss="alert">&times;</button>' +
                    '</div>');
            }, 1000);
        });

Static Background with Animation

The shake animation is included in bootstrap-modal but any animation in animate.css is supported, just include the css file in your project.

<div id="static" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false" style="display: none;">
            <div class="modal-body">
                <p>Would you like to continue with some arbitrary task?</p>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
                <button type="button" data-dismiss="modal" class="btn btn-primary">Continue Task</button>
            </div>
        </div>

Full Width

<div id="full-width" class="modal container fade" tabindex="-1" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Full Width</h4>
            </div>
            <div class="modal-body">
                <p>This modal will resize itself to the same dimensions as the container class.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ipsum ac ante fermentum suscipit. In ac augue non purus accumsan lobortis id sed nibh. Nunc egestas hendrerit ipsum, et porttitor augue volutpat non. Aliquam erat volutpat. Vestibulum scelerisque lobortis pulvinar. Aenean hendrerit risus neque, eget tincidunt leo. Vestibulum est tortor, commodo nec cursus nec, vestibulum vel nibh. Morbi elit magna, ornare placerat euismod semper, dignissim vel odio. Phasellus elementum quam eu ipsum euismod pretium.</p>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>

Long Modals

<div id="long" class="modal fade" tabindex="-1" data-replace="true" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">A Fairly Long Modal</h4>
            </div>
            <div class="modal-body">
                <button class="btn btn-default" data-toggle="modal" href="#notlong" style="position: absolute; top: 50%; right: 12px">Not So Long Modal</button>
                <img style="height: 800px" src="img/1.jpg">
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
            </div>
        </div>