Loading, please wait...

ARTDESIGN MODAL

EXAMPLES

Multiply pages

Modal
<div data-plugin-ad-modal="ad-modal" data-ad-modal-options="Modal1">Modal</div>

$.AD_Modal.Modal1 = ({
    Pages: {
        1: {
            Header: {
                Content: "TITLE ONE",
                CSS: {
                    "width": "100%",
                    "padding": "20px 20px 15px 20px",
                    "background": "#E8EFF5",
                    "color": "#719AC1",
                    "fontWeight": "bold",
                    "boxSizing": "border-box"
                }
            },
            Body: {
                Content: '<div>PAGE ONE - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida.</div>',
                CSS: {
                    "width": "100%",
                    "background": "#FFFFFF",
                    "boxSizing": "border-box",
                    "padding": "20px 20px 15px 20px",
                    "borderTop": "1px solid #C6D7E6",
                    "borderBottom": "1px solid #C6D7E6"
                }
            },
            Footer: {
                Content: {
                    1: {
                        Type: "ButtonNext",
                        Content: "Next",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    }
                },
                CSS: {
                    "boxSizing": "border-box",
                    "overflow":"hidden",
                    "width": "100%",
                    "background": "#E8EFF5"
                }
            }
        },
        2: {
            Header: {
                Content: "TITLE TWO",
                CSS: {
                    "width": "100%",
                    "padding": "20px 20px 15px 20px",
                    "background": "#E8EFF5",
                    "color": "#719AC1",
                    "fontWeight": "bold",
                    "boxSizing": "border-box"
                }
            },
            Body: {
                Content: '<div>PAGE TWO - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida.</div>',
                CSS: {
                    "width": "100%",
                    "background": "#FFFFFF",
                    "boxSizing": "border-box",
                    "padding": "20px 20px 15px 20px",
                    "borderTop": "1px solid #C6D7E6",
                    "borderBottom": "1px solid #C6D7E6"
                }
            },
            Footer: {
                Content: {
                    1: {
                        Type: "ButtonNext",
                        Content: "Next",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    },
                    2: {
                        Type: "ButtonPrev",
                        Content: "Prev",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    }
                },
                CSS: {
                    "boxSizing": "border-box",
                    "overflow":"hidden",
                    "width": "100%",
                    "background": "#E8EFF5"
                }
            }
        },
        3: {
            Header: {
                Content: "TITLE THREE",
                CSS: {
                    "width": "100%",
                    "padding": "20px 20px 15px 20px",
                    "background": "#E8EFF5",
                    "color": "#719AC1",
                    "fontWeight": "bold",
                    "boxSizing": "border-box"
                }
            },
            Body: {
                Content: '<div>PAGE THREE - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus.</div>',
                CSS: {
                    "width": "100%",
                    "background": "#FFFFFF",
                    "boxSizing": "border-box",
                    "padding": "20px 20px 15px 20px",
                    "borderTop": "1px solid #C6D7E6",
                    "borderBottom": "1px solid #C6D7E6"
                }
            },
            Footer: {
                Content: {
                    1: {
                        Type: "ButtonYes",
                        Content: "OK",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    },
                    2: {
                        Type: "ButtonPrev",
                        Content: "Prev",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    }
                },
                CSS: {
                    "boxSizing": "border-box",
                    "overflow":"hidden",
                    "width": "100%",
                    "background": "#E8EFF5"
                }
            }
        }
    }
});

Return True or False

Modal
<div data-plugin-ad-modal="ad-modal" data-ad-modal-options="Modal2">Modal</div>

$.AD_Modal.Modal2 = ({
    Pages: {
        1: {
            Header: {
                Content: "YES or NO?",
                CSS: {
                    "width": "100%",
                    "padding": "20px 20px 15px 20px",
                    "background": "#E8EFF5",
                    "color": "#719AC1",
                    "fontWeight": "bold",
                    "boxSizing": "border-box"
                }
            },
            Body: {
                Content: '<div>Click YES or No and view console</div>',
                CSS: {
                    "width": "100%",
                    "background": "#FFFFFF",
                    "boxSizing": "border-box",
                    "padding": "20px 20px 15px 20px",
                    "borderTop": "1px solid #C6D7E6",
                    "borderBottom": "1px solid #C6D7E6"
                }
            },
            Footer: {
                Content: {
                    1: {
                        Type: "ButtonYes",
                        Content: "Yes",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    },
                    2: {
                        Type: "ButtonNo",
                        Content: "No",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    }
                },
                CSS: {
                    "boxSizing": "border-box",
                    "overflow":"hidden",
                    "width": "100%",
                    "background": "#E8EFF5"
                }
            }
        }
    },
    ReturnBoolean : function(Value) {
        console.log(Value);
    }
});

Integration with other ArtDesign PlugIns

Modal
<div data-plugin-ad-modal="ad-modal" data-ad-modal-options="Modal3">Modal</div>

$.AD_Modal.Modal3 = ({
    Pages: {
        1: {
            Header: {
                Content: "Integration with other ArtDesign PlugIns",
                CSS: {
                    "width": "100%",
                    "padding": "20px 20px 15px 20px",
                    "background": "#E8EFF5",
                    "color": "#719AC1",
                    "fontWeight": "bold",
                    "boxSizing": "border-box"
                }
            },
            Body: {
                Content: '<div data-plugin-ad-slider="ad-slider"><ul><li><img src="Path/To/Images/Slider/1.jpg" alt="Image 1"></li><li><img src="Path/To/Images/Slider/2.jpg" alt="Image 2"></li></ul></div>',
                CSS: {
                    "width": "100%",
                    "background": "#FFFFFF",
                    "boxSizing": "border-box",
                    "padding": "20px 20px 15px 20px",
                    "borderTop": "1px solid #C6D7E6",
                    "borderBottom": "1px solid #C6D7E6"
                }
            },
            Footer: {
                Content: {}
            }
        }
    },
    InitializeExternalPlugIns: function() {
        $("body").ArtDesignSlider({
            Global: {
            Height: 300
        }})
    }
});

Form

Modal
<div data-plugin-ad-modal="ad-modal" data-ad-modal-options="Modal4">Modal</div>

$.AD_Modal.Modal4 = ({
    Form: {
        Form: true,
        FormName: "ModalForm",
        URLProcessing: "Path/To/ArtDesign/Demo/JavaScipt/20.ArtDesignModal/Form.php",
        FormResultName: "#FormResult"
    },
    Pages: {
        1: {
            Header: {
                Content: "FORM",
                CSS: {
                    "width": "100%",
                    "padding": "20px 20px 15px 20px",
                    "background": "#E8EFF5",
                    "color": "#719AC1",
                    "fontWeight": "bold",
                    "boxSizing": "border-box"
                }
            },
            Body: {
                Content: '<div>' +
                '<form name="ModalForm" action="POST">' +
                '<input name="Name" type="text" data-plugin-ad-input="ad-input" data-ad-input-water-mark="Name">' +
                '<input name="Family" type="text" data-plugin-ad-input="ad-input" data-ad-input-water-mark="Family">' +
                '<input name="BirthDay" type="text" data-plugin-ad-input="ad-input" data-ad-input-water-mark="Birth Day:" data-ad-input-mask="9999-99-99" data-ad-input-place="YYYY-MM-DD">' +
                '</form>' +
                '</div>',
                CSS: {
                    "width": "100%",
                    "background": "#FFFFFF",
                    "boxSizing": "border-box",
                    "padding": "20px 20px 15px 20px",
                    "borderTop": "1px solid #C6D7E6",
                    "borderBottom": "1px solid #C6D7E6"
                }
            },
            Footer: {
                Content: {
                    1: {
                        Type: "ButtonSendForm",
                        Content: "Next",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    }
                },
                CSS: {
                    "boxSizing": "border-box",
                    "overflow":"hidden",
                    "width": "100%",
                    "background": "#E8EFF5"
                }
            }
        },
        2: {
            Header: {
                Content: "FORM",
                CSS: {
                    "width": "100%",
                    "padding": "20px 20px 15px 20px",
                    "background": "#E8EFF5",
                    "color": "#719AC1",
                    "fontWeight": "bold",
                    "boxSizing": "border-box"
                }
            },
            Body: {
                Content: '<div><div id="FormResult"></div></div>',
                CSS: {
                    "width": "100%",
                    "background": "#FFFFFF",
                    "boxSizing": "border-box",
                    "padding": "20px 20px 15px 20px",
                    "borderTop": "1px solid #C6D7E6",
                    "borderBottom": "1px solid #C6D7E6"
                }
            },
            Footer: {
                Content: {
                    1: {
                        Type: "ButtonYes",
                        Content: "Close",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    },
                    2: {
                        Type: "ButtonPrev",
                        Content: "Prev",
                        CSS: {
                            "boxSizing": "border-box",
                            "float": "right",
                            "backgroundColor": "#719AC1",
                            "color": "#FFFFFF",
                            "fontWeight": "bold",
                            "padding": "15px 20px 15px 20px",
                            "cursor": "pointer"

                        },
                        Animation: {
                            Normal: {
                                "backgroundColor": "#719AC1"
                            },
                            Hover: {
                                "backgroundColor": "#6488AA"
                            },
                            Click: {
                                "backgroundColor": "#52708C"
                            }
                        }
                    }
                },
                CSS: {
                    "boxSizing": "border-box",
                    "overflow":"hidden",
                    "width": "100%",
                    "background": "#E8EFF5"
                }
            }
        }
    },
    InitializeExternalPlugIns: function() {
        $("body").ArtDesignInput()
    }
});