AZ Modal Dialog

Default settings

new AZModalDialog(
{
    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
azModalDialogAfterClose

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

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.azModalDialogId
    data.azChangeModalTitlebar - ƒ (n)
    data.azModalDialogResize - ƒ (n)
    data.azModalDialogClose - ƒ ()
});

This function is triggered after 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 - 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 - Title

Default settings

azChangeModalTitlebar(
{
    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
};

azChangeModalTitlebar(ChangeModalTitlebarOptions);

AZ Modal Dialog - Resize

Default settings

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

azModalDialogResize(ModalDialogResizeOptions);

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);
}