Loading, please wait...

ARTDESIGN MODAL

Description

ArtDesign Modal is a JavaScript PlugIn, which presents HTML content in a dynamic framework
Responsive (Resize to View Effect)
Multiply pages
HTML form support
Navigation - Prev, Next, Yes (return true), No (return false), Send form
Full support of all advanced Web browsers
Full style control only with JavaScript, without using CSS
Full style control - Size (width, height), Margin and Padding, Background (background color), Color, Border (width, color, radius)
Full content control
Hover Animations
Click Animations
Public Methods: Destroy

Demo

Modal

HTML

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

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $.AD_Modal.Modal1 = ({
            Pages: {
                1: {
                    Header: {
                        Content: "TITLE MODAL",
                        CSS: {
                            "width": "100%",
                            "padding": "20px 20px 15px 20px",
                            "background": "#E8EFF5",
                            "color": "#719AC1",
                            "fontWeight": "bold",
                            "boxSizing": "border-box"
                        }
                    },
                    Body: {
                        Content: '
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.
', CSS: { "width": "100%", "background": "#FFFFFF", "boxSizing": "border-box", "padding": "20px 20px 15px 20px", "borderTop": "1px solid #D4D4D4", "borderBottom": "1px solid #D4D4D4" } }, 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" } } } }, CSS: { "boxSizing": "border-box", "overflow":"hidden", "width": "100%", "background": "#E8EFF5" } } } } }); $(".ArtDesign").ArtDesignModal(); }); </script>