Bootstrap 3 Modal – Easy way

For past one year I am mostly using Bootstrap 3 (UI framework) for RWD and rapid prototypes, and I discovered that non-UI-background developers usually face problems during the implementation of Modal popups. To make my work easier, I have written a wrapper function in JavaScript for Bootstrap Modal. It does not need any HTML semantics to be present in DOM. The necessary HTML is added to document body when it is called first time, and later the cached instance is used. I tried to make it as simple as I think of and utilized the most used Bootstrap options for Modal.

It is well suit to anyone who just wants to call a JavaScript function and pass minimum parameters like popup title and body html (or text)… etc.

Please be aware: It is NOT independent plugin, but rather a wrapper for Bootstrap Modal (modal.js) . The jquery.js and bootstrap.js are required and to be loaded first.

See the Pen Bootstrap 3 Modal wrapper by Mohd Ovais (@ovais) on CodePen.

Just open a modal popup

showBSModal({
    title: "I am title",
    body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
});

//that's it! No HTML required 🙂

Bootstrap 3 Modal

Small modal popup

showBSModal({
    title: "I am title",
    body: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
    size: "small"
});

Bootstrap 3 Modal - small

Large modal poup

showBSModal({
    title: "This is a large popup!",
    body: "<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p><p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>", 
    size: "large"
});

Bootstrap 3 Modal - large

Add custom buttons in footer

showBSModal({
    title: "Do you want to logo out?",
    body: "You will loose all unsaved work, press 'Cancel' to return to page or 'Confirm' to log out",
    size: "small",
    actions: [{
        label: 'Cancel',
        cssClass: 'btn-success',
        onClick: function(e){
            $(e.target).parents('.modal').modal('hide');
        }
    },{
        label: 'Confirm',
        cssClass: 'btn-danger',
        onClick: function(e){
            //proceed to log out

        }
    }]
});

Bootsrap-modal-footer

On show and on hide event listeners

showBSModal({
    title: "Event Listener",
    body: "You can perform certain actions onShow or onHide as well.",
    onShow: function(e){
        //do something

    },
    onHide: function(e){
        //do something

    }
});

External HTML

When setting the remote URL, the title, body and actions values will be ignored. Rest of the features will work.

showBSModal({
    remote: 'path/to/popup/html/file'
});

Source Code

Just add below code in your helper/utility JavaScript file or save file from this link: ‘bootstrap.modal.wrapper.js’

window.showBSModal = function self(options) {

    var options = $.extend({
            title : '',
            body : '',
            remote : false,
            backdrop : 'static',
            size : false,
            onShow : false,
            onHide : false,
            actions : false
        }, options);

    self.onShow = typeof options.onShow == 'function' ? options.onShow : function () {};
    self.onHide = typeof options.onHide == 'function' ? options.onHide : function () {};

    if (self.$modal == undefined) {
        self.$modal = $('<div class="modal fade"><div class="modal-dialog"><div class="modal-content"></div></div></div>').appendTo('body');
        self.$modal.on('shown.bs.modal', function (e) {
            self.onShow.call(this, e);
        });
        self.$modal.on('hidden.bs.modal', function (e) {
            self.onHide.call(this, e);
        });
    }

    var modalClass = {
        small : "modal-sm",
        large : "modal-lg"
    };

    self.$modal.data('bs.modal', false);
    self.$modal.find('.modal-dialog').removeClass().addClass('modal-dialog ' + (modalClass[options.size] || ''));
    self.$modal.find('.modal-content').html('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">${title}</h4></div><div class="modal-body">${body}</div><div class="modal-footer"></div>'.replace('${title}', options.title).replace('${body}', options.body));

    var footer = self.$modal.find('.modal-footer');
    if (Object.prototype.toString.call(options.actions) == "[object Array]") {
        for (var i = 0, l = options.actions.length; i < l; i++) {
            options.actions[i].onClick = typeof options.actions[i].onClick == 'function' ? options.actions[i].onClick : function () {};
            $('<button type="button" class="btn ' + (options.actions[i].cssClass || '') + '">' + (options.actions[i].label || '{Label Missing!}') + '</button>').appendTo(footer).on('click', options.actions[i].onClick);
        }
    } else {
        $('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>').appendTo(footer);
    }

    self.$modal.modal(options);
}

Minified JS

window.showBSModal=function s(a){a=$.extend({title:"",body:"",remote:!1,backdrop:"static",size:!1,onShow:!1,onHide:!1,actions:!1},a);s.onShow="function"==typeof a.onShow?a.onShow:function(){};s.onHide="function"==typeof a.onHide?a.onHide:function(){};void 0==s.$modal&&(s.$modal=$('<div class="modal fade"><div class="modal-dialog"><div class="modal-content"></div></div></div>').appendTo("body"),s.$modal.on("shown.bs.modal",function(a){s.onShow.call(this,a)}),s.$modal.on("hidden.bs.modal", function(a){s.onHide.call(this,a)}));s.$modal.data("bs.modal",!1);s.$modal.find(".modal-dialog").removeClass().addClass("modal-dialog "+({small:"modal-sm",large:"modal-lg"}[a.size]||""));s.$modal.find(".modal-content").html('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">${title}</h4></div><div class="modal-body">${body}</div><div class="modal-footer"></div>'.replace("${title}", a.title).replace("${body}",a.body));var c=s.$modal.find(".modal-footer");if("[object Array]"==Object.prototype.toString.call(a.actions))for(var b=0,d=a.actions.length;b<d;b++)a.actions[b].onClick="function"==typeof a.actions[b].onClick?a.actions[b].onClick:function(){},$('<button type="button" class="btn '+(a.actions[b].cssClass||"")+'">'+(a.actions[b].label||"{Label Missing!}")+"</button>").appendTo(c).on("click",a.actions[b].onClick);else $('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>').appendTo(c); s.$modal.modal(a)};
  1. Amnon

    Very nice and useful, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *