Confirmation Dialog

Dialog with options for modal, confirmation, etc.

by ak47

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
<p>
<span id="launchDialog" style="cursor:pointer; color:blue;">Show the dialog</span>
</p>
<div id="dialogresult">

</div>
</div>

JavaScript

if (typeof (MySite) == "undefined")
{ MySite = { __namespace: true }; }

$("#launchDialog").click(function(){
	showConfirmDialog();
})

function showConfirmDialog() {
	var dlgOptions = {
      width: 300,
      height: 150,
      modal: true,
      confirm: true,
      confirmopts: {
         closeOnOk: true,
         question: "Are you sure?",
         buttons: {
            Ok: {
               Label: "OK",
               callback: dialogOkCallback
            },
            Cancel: {
               Label: "Cancel",
               callback: dialogCancelCallback
            },
         }
      }
   }
   
   var dlg = MySite.Common.createDialog("confirmDialog","Confirmation Required","<p>Some additional dialog content here</p>",dlgOptions,document);
}

function dialogOkCallback() {
	$("#dialogresult").html("You clicked Ok");
}

function dialogCancelCallback() {
	$("#dialogresult").html("You clicked Cancel");
}


MySite.Common = {
   createDialog: function (tagId, title, content, options, documentobj) {
      var dlg;
      var dlgLeft;
      var dlgTop;
      // Defaults
      var dlgWidth = 210;
      var dlgHeight = 140;
      var dlgConfirmation = "";
      var dlgConfirmationContainerHTML = "";
      var dlgConfirmationContainer;
      var isNewDialog;
      var docBody;
      var dlgTag;
      var dlgModalBg;
      var docObj;

      // Take the document object passed in or default it
      if (documentobj) {
         docObj = documentobj;
      }
      else {
         docObj = document;
      }

      docBody = $(docObj.body);

      // Process the options if available
      if (options) {
         if (options.width) {
            dlgWidth = options.width;
         }

         if (options.height) {
            dlgHeight = options.height;
         }

         if (options.modal) {
            // Set up the background div if this is a modal dialog
            dlgModalBg = $(docObj.getElementById("dialogModalBackground"));
            if (dlgModalBg.length ==...