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">
    <form role="form">
      <div class="form-group">
        <label for="cityInput">City</label>
        <input type="text" id="cityInput" class="form-control"
               placeholder="Enter City" />
      </div>
      <div class="form-group">
        <label for="phoneInput">Phone</label>
        <div class="input-group">
          <input type="text" class="form-control" id="phoneInput"
                 placeholder="Enter Phone"/>
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" id="deletePhone">
                <i class="icon-trash"></i>
            </button>
          </span>
        </div>
      </div>
    </form>
</script>

























<!-- 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());
OpenDialogForSelectionAdmItem('Enter Info', content, function() {
    alert('saved');
});

$("body").on("click", "#deletePhone", function() {
    var msg = "Are you sure you want to delete this phone number?";
    OpenDialogForSelectionAdmItem('Delete?', msg, function() {
        alert('deleted');
    });
});

function OpenDialogForSelectionAdmItem(title, content, callback) {
    var dlg = new BootstrapDialog({
        title: title,
        message: content,
        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: 'Save',
            cssClass: 'btn-primary',
            id: 'btnSave',
            action: function (dialog) {
                if (callback !== "") { callback(); }
                dialog.close();
            }
        },{
            label: 'Close',
            cssClass: 'btn',
            id: 'btnClose',
            action: function (dialog) {
                dialog.close();
            }
        }]
    }).open();
}