Index | Prev | Next

dialogs

Create stunning, modal Dialog boxes in JavaScript.

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

Description:

  • Create stunning, modal Dialog boxes in JavaScript.

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

Source:
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().spread(function (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");
       });

Requires

  • module:jquery
  • module:lex!js
  • module:css!nmodule/js/rc/dialogs/dialogs

Classes

Dialog

Methods

(static) each(func)

Description:

  • Iterate through each Dialog box.

Source:
Parameters:
Name Type Description
func function

called for each Dialog box whereby
the first argument is index of the Dialog box with the second
being the Dialog instance.

(static) make(params) → {module:dialogs~Dialog}

Description:

  • Create a Dialog box and return it.

    Please note, this will not show the Dialog box but just return
    an instance of a new one.

    This method can take either an Object Literal for parameters or a
    singular String argument for the Dialog's Content.

Source:
See:
Example

Make a dialog box and show it

dialogs.make("A dialog with no buttons")
       .show();
Parameters:
Name Type Description
params Object | String | function

parameters for launching a Dialog,
or directly, the content to be shown.

Properties
Name Type Attributes Description
content String | function <optional>

the Dialog's content.
Please note, this can be HTML. This can also be a function used to
generate the content dynamically. The callback function is passed the
Dialog instance and content jQuery element as parameters. The callback
can return a promise that when resolved will show the dialog box. By
default, if a promise is returned, a loading dialog box will appear.
title String <optional>

the Dialog's title. This should not contain HTML as any HTML will be escaped.
fade Boolean <optional>

if true, the Dialog box will fade in
quickly.
layout function <optional>

an optional callback function to be
called when the dialog lays itself out. It will receive the
dialog instance as the first parameter.
If your content needs to perform some logic to lay itself out when the
dialog changes dimensions, use this callback to do so.
ok function <optional>

handler to be invoked when the 'OK' button
is clicked. By defining this handler, this will also cause an 'OK' button
to be added to the Dialog box.
cancel function <optional>

handler to be invoked when the 'Cancel'
button is clicked. By defining this handler, this will also cause a
'Cancel' button to be added to the Dialog box.
yes function <optional>

handler to be invoked when the 'Yes'
button is clicked. By defining this handler, this will also cause a 'Yes'
button to be added to the Dialog box.
no function <optional>

handler to be invoked when the 'No' button
is clicked. By defining this handler, this will also cause a 'No' button
to be added to the Dialog box.
buttons Array.<module:dialogs~Button> <optional>

an array of additional
buttons.
parent jQuery <optional>

A parent jQuery wrapped DOM element to
attach the dialog to. If not specified, the dialog is attached to the
HTML document's body element.
private Boolean <optional>

Defaults to false. If true, the background
contents are not visible when the dialog is showing.
Returns:
Type
module:dialogs~Dialog

(static) show(params) → {module:dialogs~Dialog}

Description:

  • Create and show a Dialog box. Shortcut for dialogs.make(params).show().

Source:
See:
Example

Show a simple Dialog box. 

dialogs.show({
  title: "Dialog",
  content: "Hey this is a Dialog!",
  ok: function () {
    console.log("The OK button has been clicked");
  }
});

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

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

parameters for launching a Dialog. See
module:dialogs.make.
Returns:
Type
module:dialogs~Dialog

(static) showCancel(params) → {module:dialogs~Dialog}

Description:

  • Creates and shows a Dialog box with a Cancel button.

Source:
See:
Parameters:
Name Type Description
params Object

parameters for launching a Dialog. See
module:dialogs.make.
Returns:
Type
module:dialogs~Dialog

(static) showLoading(delayopt, promiseopt, parentopt, loaderImgopt) → {module:dialogs~Dialog}

Description:

  • Creates and shows a Loading Dialog box.

Source:
Example

Show a loading Dialog box if an AJAX call takes longer than half a second to complete. 

// Make an AJAX call that may take longer that half a second.
var promise = $.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

// If the AJAX call takes longer that half a second, display a
// Loading Dialog box.
dialogs.showLoading(500, promise);
Parameters:
Name Type Attributes Description
delay Number <optional>

An optional delay (in milliseconds) before the
Dialog box appears. By default, there is no delay in showing the Dialog.
promise Promise <optional>

An optional Promise that can be passed
into the loading Dialog box. If defined, the loading Dialog box will
automatically close after the promise has completed.
parent jQuery <optional>

The DOM parent to attach the dialog too. If not specified,
the dialog is attached to the HTML page's body.
loaderImg String <optional>

an alternate loader image to use.
Returns:
Type
module:dialogs~Dialog

(static) showOk(params) → {module:dialogs~Dialog}

Description:

  • Creates and shows a Dialog box with an OK button.

Source:
See:
Parameters:
Name Type Description
params Object

parameters for launching a Dialog. See
module:dialogs.make.
Returns:
Type
module:dialogs~Dialog

(static) showOkCancel(params) → {module:dialogs~Dialog}

Description:

  • Creates and shows a Dialog box with OK and Cancel buttons.

Source:
See:
Parameters:
Name Type Description
params Object

parameters for launching a Dialog. See
module:dialogs.make.
Returns:
Type
module:dialogs~Dialog

(static) showYesNo(params) → {module:dialogs~Dialog}

Description:

  • Creates and shows a Dialog box with Yes and No buttons.

Source:
See:
Parameters:
Name Type Description
params Object

parameters for launching a Dialog. See
module:dialogs.make.
Returns:
Type
module:dialogs~Dialog

(static) showYesNoCancel(params) → {module:dialogs~Dialog}

Description:

  • Creates and shows a Dialog box with Yes, No and Cancel buttons.

Source:
See:
Parameters:
Name Type Description
params Object

parameters for launching a Dialog. See
module:dialogs.make.
Returns:
Type
module:dialogs~Dialog

(static) size() → {Number}

Description:

  • Return the number of Open Dialogs (includes hidden).

Source:
Returns:

the number of open Dialogs.

Type
Number

Type Definitions

Button

Description:

  • An Object that defines a Button.

Source:
See:
Properties:
Name Type Attributes Description
name String <optional>

A button's unique name so it can be identified.
displayName String <optional>

The button's display name. This name will used
on the button. If not specified, the button's name will be used instead.
handler function <optional>

A function that will be invoked when the button is
clicked. Returning false will keep the dialog from closing after this handler
has been invoked.
esc Boolean <optional>

If true, this handler will be invoked when the user
hits the escape key.

An Object that defines a Button.

Type:
  • Object

Index | Prev | Next