Creating Simple Jquery Modal Container Plugins Based On Bootrap And Bootstrap Modal

written on Sab 21 Desember 2013 by Habibillah

Much of web applications use modal dialog or pop up message on several page. So de idea is to make creating modal container at once and use it anywhere. It's easy as just pass the content to the plugins.

Firstly, add required JavaScript and CSS libraries to HTML page.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal-bs3patch.css" />
    <link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" />

    <script src="http://code.jQuery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript"></script>
    <script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript"></script>

    <script src="assets/js/generic-modal-container.js" type="text/javascript"></script>
</head>
...
...
<a href="#" class="show-modal-dialog btn btn-primary">Show Modal</a>
&nbsp;
<a href="#" class="show-nested-modal-dialog btn btn-primary">Show Nested Modal</a>

I use libraries that commonly used over the world.Those are Jquery, Twitter bootstrap, and bootstrap Modal. And I will write my plugins on generic-modal-container.js file. Look at code below for the complete plugins.

(function ($) {
    $.fn.showModal = function (header, content, callback) {
        var HTML = '<div class="modal fade generic-modal">' +
            '  <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>' +
            '        <h4 class="modal-title">' + header +
            '        </h4>' +
            '      </div>' +
            '      <div class="modal-body">' + content +
            '      </div>' +
            '      <div class="modal-footer">' +
            '        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
            '        <button type="button" class="btn btn-primary ok-button-dialog">Ok</button>' +
            '      </div>' +
            '   </div><!-- /.modal-content -->' +
            '  </div><!-- /.modal-dialog -->' +
            '</div><!-- /.modal -->';

        var container = $('<div></div>').html(HTML);
        var newInstance = jQuery.extend(true, {}, container);
        newInstance.find('.ok-button-dialog').bind('click', function() {
            callback();
        });
        var modalElement = newInstance.find('.generic-modal');
    modalElement.modal();
        return modalElement;
    }
}(jQuery));

First variable define bootstrap modal, and callback function will called when Ok button clicked. I can add more option to modify button dialog label and show/hide Ok button when used on alert message.

Next, I just call that jquery plugin when I need to show a modal. The contents of modal also can be filled by Ajax request. Here how to use that plugins.

$(document).ready(function() {
    $('body').on('click', '.show-modal-dialog', function() {
        //text content
        var modalTitle = 'This is modal title';
        var message = 'This is text message.';
        var modal = $(this).showModal(modalTitle, message, function() {
            alert('Ok button clicked');
            modal.modal('hide');
        });
    });
});

var n = 0;
$(document).ready(function () {
    $('body').on('click', '.show-nested-modal-dialog', function () {
        //nested modal with html content
        var modalTitle = 'This is modal title';
        var message = '<a href="#" class="show-nested-modal-dialog btn btn-default">Show Modal ' + (++n) + '</a>';
        var modal = $(this).showModal(modalTitle, message, function() {
            var alertModal = $(this).showModal('Alert Message', 'Ok button clicked', function() {
                alertModal.modal('hide');
            });
        });
    });
});

Look at on JSFiddle for demo.

This entry was tagged on #Bootstrap_Modal, #javascript, #jquery, #jquery_ajax, #modal_dialog and #Twitter_Bootstrap