Jquery Bootstrap - Panel Dialog / Confirm Box

Jquery Bootstrap - Simple Dialog / Confirm Box Example: to show how to extend a jquery custom function and Also a custom message dialog box

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
     <h2>Main Page Title</h2>

    <p>This is a sample text</p> <a href="#" class="dlconf">Open confirm box</a>

<hr>*<a href="#" class="dlconfdef">Open defualt box</a>

    <hr>* <a href="#" class="dlconfwarning">Open warning box</a>

        <hr>* <a href="#" class="dlconfinfo">Open information box</a>
</div>

JavaScript

$.fn.nbDialogBox = function (options) {
    options = options || {};
    // set up default options
    var defaults = {
        title: "Warning!",
        body: "",
        isConfirm: false,
        panelClass: "panel-warning",
        fnOnOk: function () {},
        fnOnCancel: function () {}
    };

    // Overwrite default options
    // with user provided ones
    // and merge them into "options".
    var options = $.extend({}, defaults, options);

    var msgTitle = options.title;
    var msgBody = options.body;

    var tmpWarning = $('<div class="nb-alert-warning">' +
        '<div class="panel ' + options.panelClass + ' nb-msg-box">' +
        '<div class="panel-heading">' +
        '<h3 class="panel-title nb-msg-title"></h3>' +
        '<button class="close nb-msg-close" type="button" style="position: relative; top: -18px;">×</button>' +
        '</div>' +
        '<div class="panel-body nb-msg-body"></div>' +
        '</div>' +
        '</div>');

    var tmpFadeDiv = $("<div class='nb-jq-fade' style='position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; opacity: 0.6; background-color: #777777'></div>");

    var btnOk = '<button class="btn btn-default btn-sm pull-right nb-btn-ok" type="button">Ok</button>';
    var btnCancel = '<button class="btn btn-default btn-sm pull-right nb-btn-cancel" type="button">Cancel</button><span class="pull-right">&nbsp;</span>';

    tmpWarning.find(".nb-msg-body").html(msgBody);
    tmpWarning.find(".nb-msg-title").text(msgTitle);


    var fnClose = function () {
        var sel = ".nb-msg-box";
        $(sel).parents(".nb-alert-warning").slideUp(false, function () {
            $(sel).remove();
            $(".nb-jq-fade").fadeOut(false, function () {
                $(sel).remove();
            });
        });
    };

    var fnOk = function () {
        options.fnOnOk();
        fnClose();
    };

    var fnCancel = function () {
        options.fnOnCancel();
       ...