AZ Modal Dialog

Default settings

new AZModalDialog(
{
azModalDialogId: "",
azModalDialogTitle: "",
azModalDialogText: "",
azModalDialogiFrameURL: "",
azModalDialogWidth: 450,
azModalDialogHeight: 300,
azModalDialogNoParentScroll: false,
azModalDialogBackground: true,
azModalDialogModal: true,
azModalDialogTitlebar: true,
azModalDialogTitlebarClose: true,
azModalDialogResizable: false,
azModalDialogDraggable: true,
azModalDialogCloseOnEscape: true,
azModalDialogPosition: false,
azModalDialogPositionOf: {},
azModalDialogPositionMy: "left bottom-30",
azModalDialogPositionAt: "left top",
azModalDialogBackgroundColor: "",
azModalDialogColor: "",
azModalDialogTitlebarBackgroundColor: "",
azModalDialogTitlebarColor: ""
});

Init AZModalDialog

There are two ways to initiate the AZModalDialog. The way you choose is important for further use of the function.

1. new AZModalDialog();
The function is initiated but you do not assign the function to a variable. This means that you can not directly interact with the function.

2. var AZModalDialog = new AZModalDialog();
The function is initiated and assigned to a variable. This means you can use the variable in relation to further interaction with the function.

Whatever approach you choose, you can use the following three features (Events):

azModalDialogBeforeOpen
azModalDialogAfterOpen
azModalDialogAfterClose

Other examples:

Modal Dialog Close
Modal Dialog Title

azModalDialogId Type: String Default: ""

azModalDialogTitle Type: String Default: "" Values: Text

azModalDialogText Type: String Default: "" Values: Text or HTML

azModalDialogiFrameURL Type: String Default: ""

azModalDialogWidth Type: Integer Default: 450 Unit: px

azModalDialogHeight Type: Integer Default: 300 Unit: px

azModalDialogNoParentScroll Type: String Default: ""

azModalDialogBackground Type: String Default: ""

azModalDialogModal Type: Boolean Default: true Values: true or false
By changing the value to false, AZModalDialog will not automatically close when the user clicks on the outside of AZModalDialog.

azModalDialogTitlebar Type: Boolean Default: true Values: true or false
By changing the values to false, you have the option to hide the entire title bar.

azModalDialogTitlebarClose Type: Boolean Default: true Values: true or false
By changing the values to false, you have the option to hide the close button (X) in the right part of the title bar.

azModalDialogResizable Type: String Default: ""

azModalDialogDraggable Type: String Default: ""

azModalDialogCloseOnEscape Type: String Default: ""

azModalDialogPosition Type: String Default: ""
dialogPosition: false (default)
dialogPositionOf: { } (default)
dialogPositionMy: "left bottom-30" (default)
dialogPositionAt: "left top" (default)

azModalDialogBackgroundColor Type: Color Hex Default: ""
See also CSS .az-modal-dialog

azModalDialogColor Type: Color Hex Default: ""
See also CSS .az-modal-dialog

azModalDialogTitlebarBackgroundColor Type: Color Hex Default: ""
See also CSS .az-modal-dialog-titlebar

azModalDialogTitlebarColor Type: Color Hex Default: ""
See also CSS .az-modal-dialog-titlebar

functionlib/azModalDialogBeforeOpen Type: Function

$.subscribeonce("functionlib/azModalDialogBeforeOpen", function (e, data)
{
data.azModalDialogId
});

This function is triggered before AZModalDialog is fully initiated.

functionlib/azModalDialogAfterOpen Type: Function

$.subscribeonce("functionlib/azModalDialogAfterOpen", function (e, data)
{
data.azModalDialogId
data.azChangeModalTitlebar - ƒ (n)
data.azModalDialogClose - ƒ ()
});

This function is triggered when AZModalDialog is fully initiated.

functionlib/azModalDialogAfterClose Type: Function

$.subscribeonce("functionlib/azModalDialogAfterClose", function (e, data)
{
data.azModalDialogId
});

This function is triggered after AZModalDialog is closed.

AZ Modal Dialog 4

1. new AZModalDialog();
$.subscribeonce("functionlib/azModalDialogAfterOpen", function (e, data)
{
if (data.azModalDialogId === "ModalDialog")
{
$("#cmdButton1").off().on('click', function ()
{
data.azModalDialogClose();
});
}
});

2. var AZModalDialog = new AZModalDialog();
AZModalDialog.azModalDialogClose()

AZ Modal Dialog 5

1. new AZModalDialog();
$.subscribeonce("functionlib/azModalDialogAfterOpen", function (e, data)
{
if (data.azModalDialogId === "ModalDialog")
{
$("#cmdButton1").off().on('click', function ()
{
$.subscribeonce("functionlib/azModalDialogAfterClose", function (e, data)
{
location.reload();
});
data.azModalDialogClose();
});
}
});

2. var AZModalDialog = new AZModalDialog();
AZModalDialog.azModalDialogClose();
location.reload();

AZ Modal Dialog 6

1. new AZModalDialog();
$.subscribeonce("functionlib/azModalDialogAfterOpen", function (e, data)
{
if (data.azModalDialogId === "ModalDialog")
{
$("#cmdButton1").off().on('click', function ()
{
$.subscribeonce("functionlib/azModalDialogAfterClose", function (e, data)
{
window.location.href = "azcdn200.html";
});
data.azModalDialogClose();
});
}
});

2. var AZModalDialog = new AZModalDialog();
AZModalDialog.azModalDialogClose();
window.location.href = "azcdn200.html";

azModalDialogTitle Type: String Default: "" Values: Text

azModalDialogTitlebarBackgroundColor Type: Color Hex Default: ""
See also CSS .az-modal-dialog-titlebar

azModalDialogTitlebarColor Type: Color Hex Default: ""
See also CSS .az-modal-dialog-titlebar

azModalDialogAlertTimeout Type: Integer Default: 3000 Unit: milliseconds

var ChangeModalTitlebarOptions =
{
azModalDialogTitle: "",
azModalDialogTitlebarBackgroundColor: "",
azModalDialogTitlebarColor: "",
azModalDialogAlertTimeout: 3000
});

azChangeModalTitlebar(ChangeModalTitlebarOptions);

AZ Modal Dialog CSS

AZModalDialog has some basic CSS that you should not initially need to adjust. modaldialog.css
You can find the CSS which you can change yourself in the file CSS Team

/*---------------------
Modal Dialog
modaldialog.css
---------------------*/

.az-modal-dialog
{
border: none !important;
background-color: #FFFFFF;
color: #000000;
}

.az-modal-dialog-titlebar
{
background-color: #0078D7;
color: #FFFFFF;
}

#az-background
{
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}