Sunderbeans
// demo examples ᴮᴱᵀᴬ
Demos
  1. Promo - Sticky SlideIn Banner
  2. Promo - Static Image Banner
  3. Promo - Special Event Banner
  4. Promo - Notification Banner
  5. Promo - HTML5 Banner
  6. Promo - Fancy Banner
  7. Promo - Events Calendar
  8. Promo - Coupon Code Banner
  9. Promo - Countdown Banner
  10. Product - Quick View
  11. Product - Mini Cart
  12. Product - Carousel Slider
  13. Notification - Under Construction
  14. Notification - Simple Message
  15. Notification - Cookie Notice 2
  16. Notification - Cookie Notice 1
  17. Notification - Alert 3
  18. Notification - Alert 2
  19. Notification - Alert 1
  20. Navigation - Overlay Menu
  21. Navigation - Dropdown Menu
  22. Misc - Youtube Video
  23. Misc - User Profile settings
  24. Misc - Statistics
  25. Misc - Social Share
  26. Misc - Panorama View
  27. Misc - Multiple Popups
  28. Misc - Google Maps
  29. Misc - Facebook Page
  30. Misc - Background image
  31. Misc - Audio Player
  32. Form - Survey
  33. Form - Site Search
  34. Form - Newsletter signup
  35. Form - Login & Registration
  36. Form - Contact Us
  37. Content - Welcome Message
  38. Content - Testimonials
  39. Content - Simple Content Box
  40. Content - Read Next Post
  41. Content - Image Gallery
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 this 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 Phase.
Hey there

This is blank demo for the Sunderbean 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. Upload slickModal.min.css and slickModal.min.js from /assets/css and /assets/js into your webserver folder
  2. Copy the code below (click Select all) to your website right before closing the </body> tag
  3. Change "yourPath" in the src attribute of the script tag to match your upload destination
  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>

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

<!-- Sunderbean 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 ========== -->