Loading, please wait...

ARTDESIGN MODAL

SETTINGS

Attributes

data-plugin-ad-modal="ad-modal"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-modal="ad-modal" data-ad-modal-options="Modal">Modal</div>

data-ad-modal-options="Modal"

This attribute overwrites the settings of the plugin
<div data-plugin-ad-modal="ad-modal" data-ad-modal-options="Modal">Modal</div>

Create pages

$.AD_Modal.Modal = ({
    Pages: {
        1: { /Beginning of first page
            Header: { /* Set header */
                Content: /* HTML / Text content */,
                CSS: {
                    /* Style of the header */
                }
            },
            Body: { /* Set body */
                Content: /* HTML / Text content */,
                CSS: {
                    /* Style of the body */
                }
            },
            Footer: { /* Set footer */
                Content: {
                    1: { /* First element of the footer - allowed types of buttons: ButtonPrev, ButtonNext, ButtonYes (return true), ButtonNo (return false), ButtonSendForm */
                        Type: /* Set allowed type of button */,
                        Content: /* Text content */,
                        CSS: {
                            /* Style of the button */
                        },
                        Animation: { /* Animation of the button */
                            Normal: {
                                /* Normal */
                            },
                            Hover: {
                                /* Hover */
                            },
                            Click: {
                                /* Click */
                            }
                        }
                    }
                },
                CSS: {
                    /* Style of the footer
                }
            }
        }
    }
});

Form

$.AD_Modal.Modal = ({
    Form: {
        Form: /* true or false - use true for activation of the form method*/,
        FormName: /* Name of the form */,
        URLProcessing: /* Path to script file (.php), which will process the application form */,
        FormResultName: /* ID of the element (div), in which will be loaded script file */
    }
});

Initialize the external plugins

$.AD_Modal.Modal = ({
    InitializeExternalPlugIns: function() {
        // Initialize the external plugins
    }
});

Public Methods

Destroy

<script type="text/javascript">
    var Modal = $(".ArtDesign").ArtDesignModal();
    Modal.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "M_" // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "M_"
    },
    Global: { // Global settings of the element
        ZIndex: 99999, // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 99999
        AnimationSpeed: 0.3, // Set the AnimationSpeed; Must be decimal; By default: 0.3
        AnimationFadeSpeed: 0.3, // Set the AnimationFadeSpeed; Must be decimal; By default: 0.3
        Event: "Click", // Set the waiting event: Must be string; By default: "Click"
        StartPage: 1 // // Set the StartPage; Must be integer; By default: 1
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    Overlay: { // Settings for the Overlay
        Overlay: true, // If it is true, it sets the following settings for Overlay; By default: true
        Background: "rgba(47, 64, 80, 0.4)" // Settings for Background at rgba
    },
    Body: { // Set all setting for Body as a CSS block, can be added more setting such as attributes
        "position": "fixed",
        "top": "50%",
        "left": "50%",
        "minWidth": "300px",
        "maxWidth": "600px",
        "width": "100%",
        "display": "block",
        "zIndex": 100000,
        "borderRadius": "6px",
        "overflow": "hidden",
        "opacity": 0
    },
    Form: { // Settings for Form
        Form: false, // If it is true, it sets the following settings for Form; By default: false
        FormName: "ModalForm", // Set the Form name; Must be string; By default: "ModalForm"
        URLProcessing: "Path/To/Form.php", // Set the file to which the form will be sent; Must be string; By default: "Path/To/Form.php"
        FormResultName: "#ModalForm" // Set the id div in which should be loaded the form; Must be string; By default: "#ModalForm"
    },
    Pages: {},
    InitializeExternalPlugIns: function() {},
    ReturnBoolean: function() {}
</script>