AZ Window

AZ Full Window

Default settings

new AZWindow(
{
    azWindowTitle: "",
    azWindowText: "",
    azWindowWidth: 450,
    azWindowHeight: 150,
    azWindowPositionTop: 0,
    azWindowModal: false,
    azWindowTitlebar: true,
    azWindowTitlebarClose: true,
    azWindowAnimation: true,
    azWindowNoParentScroll: false,
    azWindowBackground: true,
    azWindowBackgroundColor: "",
    azWindowColor: "",
    azWindowTitlebarBackgroundColor: "",
    azWindowTitlebarColor: "",
    azWindowButton: {
        Button1: false,
        TypeButton1: "primary",
        SizeButton1: "",
        TextButton1: "",
        Button2: false,
        TypeButton2: "info",
        SizeButton2: "",
        TextButton2: ""
    }
});

Default settings

new AZFullWindow(
{
    azFullWindowText: "",
    azFullWindowPosition: "bottom",
    azFullWindowFadeIn: 400,
    azFullWindowFadeOut: 400,
    azFullWindowBackgroundColor: "",
    azFullWindowColor: ""
});

Init AZWindow

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

1. new AZWindow();
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 AZWindow = new AZWindow();
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):

azWindowBeforeOpen
azWindowAfterOpen
azWindowAfterClose


Other examples:
Window Title
Init AZFullWindow

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

1. new AZFullWindow();
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 AZFullWindow = new AZFullWindow();
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):

azFullWindowBeforeOpen
azFullWindowAfterOpen
azFullWindowAfterClose
azWindowTitle Type: String Default: "" Values: Text
azWindowText Type: String Default: "" Values: Text or HTML
azWindowWidth Type: Integer Default: 450 Unit: px
For screen sizes below 576, azWindowWidth will be adjusted to fit the screen size of the device if azWindowWidth is set larger than the screen width.
azWindowHeight Type: Integer Default: 150 Unit: px
For screen sizes below 576, azWindowHeight will be adjusted to fit the screen size of the device if azWindowHeight is set larger than the screen height.
azWindowPositionTop Type: Integer Default: 0 Unit: px
azWindowModal Type: Boolean Default: false Values: true or false
By changing the value to true, AZWindow will not automatically close when the user clicks on the outside of AZWindow.
azWindowTitlebar Type: Boolean Default: true Values: true or false
By changing the values to false, you have the option to hide the entire title bar.
azWindowTitlebarClose 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.
azWindowAnimation Type: Boolean Default: true Values: true or false
azWindowNoParentScroll Type: Boolean Default: false Values: true or false
By changing the values to true, the scroll bar for the main page will be removed and AZWindow will retain its position when scrolling.
azWindowBackground Type: Boolean Default: true Values: true or false
azWindowBackgroundColor Type: Color Hex Default: ""
See also CSS #az-window
azWindowColor Type: Color Hex Default: ""
See also CSS #az-window
azWindowTitlebarBackgroundColor Type: Color Hex Default: ""
See also CSS #az-window > .az-window-titlebar
azWindowTitlebarColor Type: Color Hex Default: ""
See also CSS #az-window > .az-window-titlebar
azWindowButton Type: object
Button1: true or false TypeButton1: "default" or "primary" or "success" or "info" or "warning" or "danger" or "link" SizeButton1: "" or "xs" or "sm" or "md" TextButton1: Text
Button2: true or false TypeButton2: "default" or "primary" or "success" or "info" or "warning" or "danger" or "link" SizeButton2: "" or "xs" or "sm" or "md" TextButton2: Text
functionlib/azWindowBeforeOpen Type: Function
$.subscribeonce("functionlib/azWindowBeforeOpen", function ()
{
});

This function is triggered before AZWindow is fully initiated.
functionlib/azWindowAfterOpen Type: Function
$.subscribeonce("functionlib/azWindowAfterOpen", function (e, data)
{
    data.azChangeWindowTitlebar - ƒ (n)
    data.azWindowClose - ƒ ()
});

This function is triggered when AZWindow is fully initiated.
functionlib/azWindowAfterClose Type: Function
$.subscribeonce("functionlib/azWindowAfterClose", function ()
{
});

This function is triggered after AZWindow is closed.

AZ Window - Title

Default settings

azChangeWindowTitlebar(
{
    azWindowTitle: "",
    azWindowTitlebarBackgroundColor: "",
    azWindowTitlebarColor: "",
    azWindowAlertTimeout: 3000
});
azWindowTitle Type: String Default: "" Values: Text
azWindowTitlebarBackgroundColor Type: Color Hex Default: ""
See also CSS .az-window-titlebar
azWindowTitlebarColor Type: Color Hex Default: ""
See also CSS .az-window-titlebar
azWindowAlertTimeout Type: Integer Default: 3000 Unit: milliseconds
var ChangeWindowTitlebarOptions =
{
    azWindowTitle: "",
    azWindowTitlebarBackgroundColor: "",
    azWindowTitlebarColor: "",
    azWindowAlertTimeout: 3000
});

azChangeWindowTitlebar(ChangeWindowTitlebarOptions);

AZ Window CSS

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

/*---------------------
AZ Window
window.css
---------------------*/
#az-window
{
    background-color: #FFFFFF;
    color: #000000;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#az-window > .az-window-titlebar
{
    background-color: #0078D7;
    color: #FFFFFF;
}

#az-window > .az-window-titlebar > h1
{
    font-size: 14px;
}

#az-window > .az-window-titlebar > span
{
    font-size: 14px;
    font-weight: bold;
}

#az-window > .az-window-titlebar > span:hover
{
    color: #FF4136;
}


AZ Full Window CSS

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

/*---------------------
AZ Full Window
window.css
---------------------*/
#az-full-window
{
    background-color: #FFFFFF;
    color: #000000;
}

#az-full-window-close
{
    padding: 7px 14px;
    font-size: 35px;
}

#az-full-window-close:hover
{
    background: #DDDDDD;
}