dialogs

Description:

• Create stunning, modal Dialog boxes in JavaScript.

  This is a UI library used to create dynamic, modal Dialog boxes in your
  browser.

Source:

• dialogs/dialogs.js, line 1073

Examples

A simple modal OK dialog box.

dialogs.showOk("Some Dialog Box Content")
       .ok(function () {
         console.log("The OK button has been clicked");
       });

A Dialog box with a title and some HTML content.

dialogs.showOk({
         title: "The Dialog Box's Title!",
         content: "<p>Some HTML Content</p>"
       })
       .ok(function () {
         console.log("The OK button has been clicked");
       });

 

A simple Yes, No, Cancel dialog box.

 dialogs.showYesNoCancel("Would you like some tea with that?")
        .yes(function () {
          console.log("The user clicked Yes");
        })
        .no(function() {
          console.log("The user clicked No");
        })
        .cancel(function () {
          console.log("The user clicked Cancel");
        });

Show a loading dialog box and have it close after the AJAX call has finished.

dialogs.showLoading(0, $.ajax(uri, options));

Use promises to show a loading dialog box and then pop up another dialog.

var dlg = dialogs.showLoading();
// After 2 seconds, close the loading box.
setTimeout(function () {
  dlg.close();
}, 2000);
dlg.promise().then(([ dlg, buttonClicked ]) => {
  // Prints 'ok'
  console.log(buttonClicked);
     
  dialogs.showOk("The foobar has finished loading!");
});

Show a dialog. Have the content dynamically created by passing in a function for the content.

dialogs.show(function(dlg, jq) {
  jq.html("<div>I love Niagara 4!</div>");
});

Show a dialog. Have the content dynamically created by passing in a function for the content. The dialog will only show when the return promise has been resolved.

dialogs.show(function(dlg, jq) {
  return Promise.resolve($.ajax("/myajax")
    .then(function (response) {
      jq.html("The answer is..." + JSON.parse(response).answer);
    });
});

A Dialog BOX with background privacy setting.

dialogs.showOk({
         title: "The Dialog Box's Title!",
         content: "<p>Some HTML Content</p>",
         private: true //ensures background contents are screened when the dialog is showing
       })
       .ok(function () {
         console.log("The OK button has been clicked");
       });