AZ Modal Dialog

Default settings

new AZModalDialog(
{
    azModalDialogStyle: "rounded",
    azModalDialogId: "",
    azModalDialogTitle: "",
    azModalDialogText: "",
    azModalDialogiFrameURL: "",
    azModalDialogWidth: 300,
    azModalDialogHeight: 150,
    azModalDialogContentHeight: false,
    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
azModalDialogFocus
azModalDialogAfterClose

Other examples:
Modal Dialog Close
Modal Dialog Title
Modal Dialog Resize

azModalDialogStyle Type: String Default: "rounded" Values:"rounded" or "flat"
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: 300 Unit: px
AZ Modal Dialog width will be adjusted to fit the screen size of the device if azModalDialogWidth is set larger than the screen width.
azModalDialogHeight Type: Integer Default: 150 Unit: px
AZ Modal Dialog height will be adjusted to fit the screen size of the device if azModalDialogHeight is set larger than the screen width.
azModalDialogContentHeight Type: Boolean Default: false Values: true or false
By changing the value to true, AZModalDialog will automatically adjust the height of the window to the content.
azModalDialogNoParentScroll Type: Boolean Default: false Values: true or false
azModalDialogBackground Type: Boolean Default: true Values: true or false
azModalDialogModal Type: Boolean Default: true Values: true or false
By changing the value to false, AZModalDialog will 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: Boolean Default: false Values: true or false
azModalDialogDraggable Type: Boolean Default: true Values: true or false
azModalDialogCloseOnEscape Type: Boolean Default: true Values: true or false
azModalDialogPosition Type: Boolean Default: false Values: true or false
azModalDialogPositionOf Type: object
azModalDialogPositionMy Type: String Default: "left bottom-30"
azModalDialogPositionAt Type: String Default: "left top"
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.$Window - i.fn.init[]
    data.$Titlebar - i.fn.init[]
    data.$Dialog - i.fn.init[]
    data.$Article - i.fn.init[]
    data.$Iframe - i.fn.init[]
    data.azModalDialogId
    data.azModalDialogClose - ƒ ()
    data.azChangeModalTitlebar - ƒ (n)
    data.azModalDialogResize - ƒ (n)
});

This function is triggered after AZModalDialog is fully initiated.
functionlib/azModalDialogFocus Type: Function
$.subscribe("functionlib/azModalDialogFocus", function (e, data)
{
    data.$Window - i.fn.init[]
    data.$Titlebar - i.fn.init[]
    data.$Dialog - i.fn.init[]
    data.$Article - i.fn.init[]
    data.$Iframe - i.fn.init[]
    data.azModalDialogId
});

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

This function is triggered after AZModalDialog is closed.

AZ Modal Dialog - Title

Default settings

new AZModalDialog(
{
    azModalDialogTitle: "",
    azModalDialogTitlebarBackgroundColor: "",
    azModalDialogTitlebarColor: "",
    azModalDialogAlertTimeout: 3000
});
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
};

1. new AZModalDialog();
$.subscribeonce("functionlib/azModalDialogAfterOpen", function (e, data)
{
    data.azChangeModalTitlebar(ChangeModalTitlebarOptions);
});

2. var AZModalDialog = new AZModalDialog();
AZModalDialog.azChangeModalTitlebar(ChangeModalTitlebarOptions);

AZ Modal Dialog - Resize

Default settings

new AZModalDialog(
{
    azModalDialogWidth: 300,
    azModalDialogHeight: 150
};
azModalDialogWidth Type: Integer Default: 300 Unit: px
azModalDialogHeight Type: Integer Default: 150 Unit: px
var ModalDialogResizeOptions =
{
    azModalDialogWidth: 600,
    azModalDialogHeight: 600
};

1. new AZModalDialog();
$.subscribeonce("functionlib/azModalDialogAfterOpen", function (e, data)
{
    data.azModalDialogResize(ModalDialogResizeOptions);
});

2. var AZModalDialog = new AZModalDialog();
AZModalDialog.azModalDialogResize(ModalDialogResizeOptions);

AZ Modal Dialog - Close

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";


AZ Modal Dialog CSS

AZ Modal Dialog has some CSS that you can find here: modaldialog.css