Presets of the Slick-Modal for TYPO3

The Slick-Modal Extension for TYPO3 makes use of easy to configure Presets, so that your editor doesn't have to tackle with complicated configuration settings. You just prepare the required presets for your Website and the editor creates simply Slick-Modals with their Content in desired look and feel.

Currently, the extension comes with 4 Presets Standard, Delayed, Toast, and Background.

Standard: A button is shown on the web page. On click the modal opens. The modal can be filled with any content element. The modal is placed in the center of the screen. The actual web page is darkened.

Delayed: After the page opens, a few seconds pass. Then the page dims and the modal appears. ATTENTION: A cookie is set here, which ensures that the modal appears only once. This must be deleted if necessary to display the modal again.

Toast: After the page opens, a few seconds pass. Then, in the lower right corner, an area containing any content element is displayed. The message will disappear automatically after a few seconds. ATTENTION: A cookie is set here, which ensures that the modal appears only once. This must be deleted if necessary to display the modal again.

Background: A button is shown on the web page. On click the modal opens. The modal can be filled with any content element. The modal is centered, placed at the center bottom of the screen. The actual web page is overlaid with a background image.

Create Slick-Modal Preset configuration.

To configure a Preset for a Slick-Modal, you only needs TypoScript. The following example defines a preset with name MyPreset. The description of all configuration values you find in Slick-Modal documentation.

plugin.tx_slickmodal {
  settings {
    presets {
      MyPreset {
        # Restrictions
        restrict_hideOnUrls =
        restrict_cookieSet = true
        restrict_cookieDays =  30
        # cookieTriggerClass = slick-modal-cookie-UID
        # cookieName = slick-modal-UID
        restrict_cookieScope = domain
        restrict_dateRange = false
        restrict_dateRangeStart =
        restrict_dateRangeEnd =
        restrict_dateRangeServerTime = true
        restrict_dateRangeServerTimeFile =
        restrict_dateRangeServerTimeZone = Europe/London
        restrict_showAfterVisits = 1
        restrict_showAfterVisitsResetWhenShown= false

        # Popup
        popup_type = none
        popup_delayedTime  = 0s
        popup_scrollDistance = 400px
        popup_scrollHideOnUp = false
        popup_exitShowAlways = false
        popup_autoClose = false
        popup_autoCloseAfter = 3s
        popup_openWithHash = false
        popup_redirectOnClose = false
        popup_redirectOnCloseUrl =
        popup_redirectOnCloseTarget = _blank
        popup_redirectOnCloseTriggers = overlay button
        popup_position = center
        popup_animation = fadeIn
        popup_closeButtonEnable = true
        popup_closeButtonStyle = cancel simple
        popup_closeButtonAlign = right
        popup_closeButtonPlace = outside
        popup_closeButtonText = Close
        # reopenClass = open-slick-modal-UID
        popup_reopenClassTrigger = click
        popup_reopenStickyButtonEnable = false
        popup_reopenStickyButtonText = Open popup
        popup_enableESC = true
        popup_bodyClass =
        popup_wrapperClass =
        popup_draggableEnable = false
        popup_allowMultipleInstances = false
        # Popup styling
        popupWidth = 480px
        popupHeight = 280px
        popupBackground = #fff
        popupMargin = 30px
        popupPadding = 30px
        popupPosition = center
        popupAnimationDuration = 0.4s

        # Overlay
        overlay_isVisible = true
        overlay_closesPopup = true
        overlay_animation = fadeIn
        # Overlay styling
        overlayColor = rgba(0,0,0,0.85)
        overlayAnimationDuration = 0.4s
        overlayAnimationDelay = 0s

        # Content
        content_loadViaAjax = false
        content_animate = false
        content_animation = zoomIn
        # Content styles
        contentAnimationDuration = 0.4s
        contentAnimationDelay = 0.4s

        # Page
        page_animate = false
        page_animation  = scale
        page_animationDuration = 0.4s
        page_blurRadius = 0px
        pageScaleValue = 0.9
        page_moveDistance = 20%

        # Mobile rules
        mobile_show = false
        mobile_breakpoint = 480px
        mobile_position = bottomCenter
        # Mobile styles
        mobileWidth = 100%
        mobileHeight = auto
        mobileBackground = #fff
        mobileMargin = 0
        mobilePadding = 18px
        responsive = true
        mobileAnimationDuration = 0.4s

        # Callbacks
        callback_beforeInit (
            function() {
                // Your code goes here
                //console.log('onSlickLoad');
            }
        )
        callback_afterInit (
            function() {
                console.log('callback_beforeInit');
            }
        )
        callback_beforeOpen (
            function() {
                console.log('callback_beforeOpen');
            }
        )
        callback_afterOpen (
            function() {
                console.log('callback_afterOpen');
            }
        )
        callback_afterVisible (
            function() {
                console.log('callback_afterVisible');
            }
        )
        callback_beforeClose (
            function() {
                console.log('callback_beforeClose');
            }
        )
        callback_afterClose (
            function() {
                console.log('callback_afterClose');
            }
        )
        callback_afterHidden (
            function() {
                console.log('callback_afterHidden');
            }
        )
      }
    }
  }
}

registering the Preset in TYPO3 Backend

The new configuration preset must be registered, so that you are able to select them in TYPO3 backend. This can be done by using Page-TypoScript (tsconfig):

TCEFORM.tt_content {
    tx_slickmodal_preset {
        addItems {
            Default = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_default
            Delayed = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_delayed
            Toast = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_toast
            Background = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_background
            MyPreset = The label for my preset in backend
        }
    }
}

Create Slick-Modal Fluid-Templates

Each of this Presets owned an own Fluid-Partial.

The Default.html Fluid-Partial looks like:

<button class="btn btn-primary open-slick-modal-{contentObject.uid}">OPEN</button>
<div id="slick-modal-{contentObject.uid}" class="slickModal">
    <div class="slickWindow">
        <f:format.raw><slickmodal:renderContent uid="{contentUid}" /></f:format.raw>
    </div>
</div>

The first line defines a button, which is used for opening the Slick-Modal. The following last lines defines the content of the Slick-Modal. In this case we only insert the result of the content element rendering.

For our new preset with name MyPreset we create a Fluid-Partial with name MyPreset.html. In this template you can modify your HTML as you need.