Multiple Dialogs

by Kyle Mitofsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css">
<script id="FormDialog" type="text/placeholder">
    <button class="btn btn-default addDialog" type="button">
        <i class="icon-plus"></i>
        Add Dialog
    </button>
</script>

<button class="btn btn-default addDialog" type="button" >
    <i class="icon-plus"></i>
    Add Dialog
</button>






















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/22713085/1366033'>How to open two modal dialogs in Twitter Bootstrap at the same time</a><br/>                
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>

JavaScript

var content = $("#FormDialog").html();

$("body").on("click", ".addDialog", function() {
    AddDialog("I'm a Dialog", content, function() {});
});

function AddDialog(title, content, callback) {
    var $content = $(content);
    var dlg = new BootstrapDialog({
        title: title,
        message: $content,
        draggable: true,
        onshown: function(dialog) {
            var tier = $('.bootstrap-dialog').length - 1;
            dialog.$modal.prev(".modal-backdrop")
                .css("z-index", 1030 + tier * 30);
            dialog.$modal
                .css("z-index", 1040 + tier * 30);
        },
        buttons: [{
            label: 'OK',
            cssClass: 'btn-primary',
            action: function (dialog) {
                if (callback !== "") { callback(); }
                dialog.close();
            }
        },{
            label: 'Close',
            cssClass: 'btn',
            action: function (dialog) {
                dialog.close();
            }
        }]
    }).open();
}