Slick Modals
// settings generator ᴮᴱᵀᴬ
The basics
Popup ID ID of your popup which will be generated.
Popup type Defines your popup display type.
Delay time Delay time of delayed popup time.
0s
Scroll distance Vertical scrolling distance for scroll popup.
400px
Auto close With auto close the modal will close after X seconds.
Auto close delay Auto closing trigger timeout in seconds.
10s
Modal window
Popup width Defines popup width (default in px).
480px
Popup height Defines popup height (default in px).
280px
Popup location Choose your popup screen location.
Animation effect Choose your desired popup animation effect.
Animation duration Choose popup animation speed/duration.
0.4s
Box shadow Enables box shadow effect of the modal.
Background color Modal background color (HEX or RGBA).
Popup radius Sets the modal border radius (in px).
4px
Popup margin Sets the modal outer margins (in px).
30px
Popup padding Sets the modal inner padding (in px).
30px
Modal overlay
Show overlay? Enabled/disables the modal overlay.
Can close the modal? Defines if overlay can close the modal.
Background color Sets modal overlay background color.
Animation effect Choose your desired overlay animation effect.
Animation duration Defined overlay animation speed.
0.4s
Background effects
Animation effect Enables the page background effect's.
Animation duration Page/background effect animation duration.
0.4s
Scale value Scale background effect value.
0.9
Blur radius Blur background effect value in px.
1px
Move distance Page move distance value in percentage.
30%
Inner content
Animate content? Defines if the inner content is animated.
Animation effect Inner content animation effect.
Animation duration Inner content animation speed/duration.
0.4s
Animation delay Inner content animation delay.
0.4s
Statistics
Enable statistics This option enables Slick Stats and it's settings.
Stats file location Exact path of the collect.php file.
Modal name Enter the modal / campaign name.
Modal summary Enter the modal / campaign summary.
CTA class Enter the name of your CTA trigger class.
Cookies
Set a cookie? Hides the modal upon closing.
Cookie lifetime Sets the cookie expire lifetime.
30d
Cookie trigger class Class which will trigger the cookie.
Cookie name Name of the saved modal cookie.
Cookie scope Scope of the saved modal cookie.
Mobile settings
Show on mobile? Visibility of the popup on mobiles.
Responsive? Defines if the popup is responsive.
Mobile breakpoint Breakpoint when the modal goes responsive.
480px
Mobile location Popup location on mobile devices.
Mobile width Popup width on mobile devices.
90%
Mobile height Popup height on mobile devices.
280px
Mobile radius Popup border radius on mobile devices.
0px
Mobile margin Popup margins on mobile devices.
0px
Mobile padding Popup padding on mobile devices.
24px
Videos
Video support Support for the Youtube videos.
Video autoplay Defines the autoplay of the video.
Stop on close Defines stopping a video on close.
Button & additional
Enable close button Adds a close button to the modal.
Button style Choose the closing button style.
Enable ESC key Defines if ESC key closes the modal.
Reopen class/selector Class which will reopen the modal when disabled.
Hide on pages Relative paths separated with with comma.
Some options & functions cannot be previewed via settings generator (for example: mobile settings, hide on pages, stats etc, video settings...) but they will still generate upon clicking the Generate button and can be changed manually. You can always additionaly edit all the values when pasting them to your page/document. You can also change most values defined in pixels to percentage (for example: popup width). As the generator is in BETA please report any bugs or features you might like to have.
Hey there

This is blank demo for the Slick modal options preview. Go ahead and cutomize it as you wish!

Close me
Great, all done!

You can now copy/paste (via text editor - source code) the HTML along with the modal settings to your page:

  1. Copy the HTML to your website right before closing the body tag
  2. Check and adjust the settings values additionally
  3. Change the yourPath to your script upload path
  4. Insert your HTML elements and content inside the popup
Select all
<!-- ========== START COPYING HERE ========== -->

<div id="" class="slickModal">
    <div class="slickWindow">
        <div>
        <!-- Your popup content -->
        ... your content goes here ...
        <!-- / Your popup content -->
        </div>
    </div>
</div>

<!-- Slick Modals jQuery plugin -->
<script type="text/javascript" src="yourPath/slickModal.min.js"></script>

<!-- Slick modal settings -->
<script type="text/javascript">
    $(document).ready(function() {
        // Modal 1
        $('#').slickModals({
            // Hide on pages
            hideOnPages: [],
            // Popup type
            popupType: '',
            delayTime: ,
            scrollTopDistance: ,
            // Auto closing
            autoClose: ,
            autoCloseDelay: ,
            // Statistics
            enableStats: ,
            fileLocation: '',
            modalName: '',
            modalSummary: '',
            callToAction: '',
            // Popup cookies
            setCookie: ,
            cookieDays: ,
            cookieTriggerClass: '',
            cookieName: '',
            cookieScope: '',
            // Overlay styling
            overlayVisible: ,
            overlayClosesModal: ,
            overlayColor: '',
            overlayAnimationDuration: '',
            overlayAnimationEffect: '',
            // Background effects
            pageAnimationDuration: '',
            pageAnimationEffect: '',
            pageBlurRadius: 'px',
            pageScaleValue: '',
            pageMoveDistance: '%',
            // Popup styling
            popupWidth: 'px',
            popupHeight: 'px',
            popupLocation: '',
            popupAnimationDuration: '',
            popupAnimationEffect: '',
            popupBoxShadow: '',
            popupBackground: '',
            popupRadius: 'px',
            popupMargin: 'px',
            popupPadding: 'px',
            // Mobile rules
            showOnMobile: ,
            responsive: ,
            mobileBreakPoint: 'px',
            mobileLocation: '',
            mobileWidth: '%',
            mobileHeight: 'px',
            mobileRadius: 'px',
            mobileMargin: 'px',
            mobilePadding: 'px',
            // Animate content
            contentAnimation: ,
            contentAnimationEffect: '',
            contentAnimationDuration: '',
            contentAnimationDelay: '',
            // Youtube videos
            videoSupport: ,
            videoAutoPlay: ,
            videoStopOnClose: ,
            // Close and reopen button
            addCloseButton: ,
            buttonStyle: '',
            enableESC: ,
            reopenClass: '',
            // Additional events
            onSlickLoad: function() {
                // Your code goes here
            },
            onSlickClose: function() {
                // Your code goes here
            }
        });
    });
</script>
<!-- ========== END COPYING HERE ========== -->