Slick Modal - HTML5 and CSS3 modal popups

Documentation

• Created: 30.07.2015
• Latest Update: 05.12.2015
• Created by: Capelle
• Profile: www.codecanyon.net/user/capelle/portfolio
• Support: support@justcapelle.com

Thank you for choosing Slick Modals

Before you get started i suggest you read the documentation and incase you have an issue or you need help, feel free to contact me via email or PM on Codecanyon.

Overview

Slick Modal are HTML5 and CSS3 popups, which are ment to be easely implementated into almoust any website or CMS system with some basic knowledge of HTML, CSS and/or server side scripting.
It is a framework for easy installation, customization and development. It is not a CMS plugin, module or widget hence it needs to be installed manually. Slick Modals does not contain premade popup designs, it is a layout/framework popup for your custom popup design/s for static websites or dynamic (CMS).

• Google Chrome 20+ (Win)
• Opera 12+ (Win)
• Firefox 20+ (Win)
• Safari 7+ (OSX)
• Internet Explorer 9+ (Win)

Slick Modal is made to be used for popups with fixed dimensions. If you plan to use responsive content, it's best to adapt your content with css media queries. You can also check the responsive demo which servers as a simple guide for you to create your modal content responsive.

1. Quick start - includes a single demo for a quick start
2. Demo layouts - included few basic demo layouts
3. Documentation
4. changelog.txt

The structure

Slick Modal popup is made from the html elements which define the layout, CSS for basic layout design and JS plugin, which controls the functionality part of the popup.

The html is very minimal. It consist from unique ID, which is the parent for the window element that holds our popup content inside.

<!-- ========== START COPYING HERE ========== -->
	<div id="popup-1" class="slickModal">
		<div class="window">
			<!-- Your popup content -->
			... your content goes here ...
			<!-- / Your popup content -->
		</div>
	</div>
<!-- ========== END COPYING HERE ========== -->

• Main selector has an ID, which defines the popup as unique element on the page. This is important as the jQuery plugin needs to have it defined within the options and with that it can "connect" the give options with that element.
• Main selector has class "slickModal" which defines him appropriate styles from the css and functionlities from the jQuery plugin.
• jQuery plugin dynamically creates an overlay within the main selector if we give it that option inside the plugin.
• Main selector holds the "window" element, which is our popup. Inside it you copy your elements which will be visible upon modal visibility.
• jQuery plugin dynamically creates closeModal element, which is our closing button/label.

The CSS is made for basic popup styling and layout functionlities. It can be modified if needed but most of our styling here is just a basic fallback if none of the jQuery plugin options are selected. The CSS structure is made from:

• Reset and basics - reset styles to give our popup consistency across the browsers.
• Background defaults - here are default settings for the background effects.
• Modal window positions - positions for the our popup window.
• Modal window transitions - predefined window transitions.
• Transition timing defaults - predefined window transition timings.
• Close buttons - styling for the close buttons.

As mentioned jQuery plugin controls the functionality part of the popup. We invoke/call our options right inside the js file. Below is an example of a simple popup:

// Plugin invoke
$(document).ready(function () {
    $("#ourPopup-1").slickModals({
        popupType: "scroll",
        delayTime: 1000,
        exitTopDistance: 40,
        scrollTopDistance: 400,
        setCookie: false,
        cookieDays: null,
        cookieTriggerClass: "",
        cookieName: "",

        // Overlay options
        overlayBg: false,
        overlayBgColor: "",
        overlayTransition: "",
        overlayTransitionSpeed: "",

        // Background effects
        bgEffect: "scale",
        blurBgRadius: "2px",
        scaleBgValue: "0.9",

        // Window options
        windowWidth: "480px",
        windowHeight: "250px",
        windowLocation: "center",
        windowTransition: "ease",
        windowTransitionSpeed: "0.4",
        windowTransitionEffect: "zoomIn",
        windowShadowOffsetX: "0",
        windowShadowOffsetY: "0",
        windowShadowBlurRadius: "20px",
        windowShadowSpreadRadius: "0",
        windowShadowColor: "rgba(0,0,0,0.3)",
        windowBackground: "rgba(255,255,255,1)",
        windowRadius: "12px",
        windowMargin: "auto",
        windowPadding: "30px",

        // Close and reopen button
        closeButton: "icon",
        reopenClass: "openSlickModal-1",
    });
});

Quick Installation

In order to install Slick Modal popup into your html page, follow these few simple steps:

Open the 1. Quick start folder. Then open index.html document with your favorite text editor.
Once opened in editor, simply select all the code between the main comments ("START COPYING HERE" and "END COPYING HERE") and copy selected code to your document file right before closing </body> tag at the end of your page.

<!-- START COPYING HERE -->
	...
	select all the code between the comments and copy/paste to your document
	...
<!-- / END COPYING HERE -->

When you have pasted the html code then insert your elements between the "Your popup content" and "/ Your popup content" comments. You can put anything inside it, your Contact form, signup form, video, map... any element.

<!-- ========== START COPYING HERE ========== -->
	<div id="popup-1" class="slickModal">
		<div class="window">
			<!-- Your popup content -->
			... your content goes here ...
			<!-- / Your popup content -->
		</div>
	</div>
<!-- ========== END COPYING HERE ========== -->

Upload Slick Modal css and jquery file into your chosen folder on your webserver or local site. It's recommended that you use minified versions of both files for better performance.
Then call the css and jquery file. Call CSS from the <head> section and if possible call the jquery plugin right before closing </body> tag for better performance. Below is a demo of callings:

	<head>
		...
		<link rel="stylesheet" type="text/css" href="yourPath/sm-minified.css" media="screen" />
		...
	</head>

	<body>
		...
		<script type="text/javascript" src="yourPath/jquery.slick-modals.min.js"></script>
	</body>

Open the Slick Modals jQuery plugin file and adjust the settings at the plugin invoke section. Also adjust the main ID selector which will control the modal setup.

// Plugin invoke
$(document).ready(function () {
    ... plugin settings (read more about them below) ...
});

Plugin options

Your popup consist from the options you give it by changing the settings inside the Slick jQuery file.
They give you control of modal's functionality, look and feel. Below is an explanation of all avaliable options:

Be sure to use avaliable options only (in above specification). See where you need to use quotation marks and specific units (pixels, percentages...). For reference see the setup below:

// Plugin invoke
$(document).ready(function () {
    $("#popup-1").slickModals({
        popupType: "delayed",
        delayTime: 1000,
        exitTopDistance: 40,
        scrollTopDistance: 400,
        setCookie: true,
        cookieDays: 0,
        cookieTriggerClass: "setCookie-1",
        cookieName: "slickModal-1",

        // Overlay options
        overlayBg: true,
        overlayBgColor: "rgba(0,0,0,0.85)",
        overlayTransition: "ease",
        overlayTransitionSpeed: "0.4",

        // Background effects
        bgEffect: "scale",
        blurBgRadius: "2px",
        scaleBgValue: "0.9",

        // Window options
        windowWidth: "500px",
        windowHeight: "300px",
        windowLocation: "bottomRight",
        windowTransition: "ease",
        windowTransitionSpeed: "0.4",
        windowTransitionEffect: "zoomIn",
        windowShadowOffsetX: "0",
        windowShadowOffsetY: "0",
        windowShadowBlurRadius: "20px",
        windowShadowSpreadRadius: "0",
        windowShadowColor: "rgba(0,0,0,0.3)",
        windowBackground: "rgba(255,255,255,1)",
        windowRadius: "12px",
        windowMargin: "30px",
        windowPadding: "30px",

        // Close and reopen button
        closeButton: "icon",
        reopenClass: "openSlickModal-1",
    });
});

Faq

In this section we'll cover few basics with Slick Modal popup and some pointers on How to and Faq.

In order to have two or more modals you should create two html popup elements with different ID's and call the plugin settings for each of them. For example:

	
<!-- ========== YOUR FIRST POPUP ========== -->
<div id="popup-1" class="slickModal">
	<div class="window">
		<!-- Your popup content -->
		... your content for popup 1 goes here ...
		<!-- / Your popup content -->
	</div>
</div>

<!-- ========== YOUR SECOND POPUP ========== -->
<div id="popup-2" class="slickModal">
	<div class="window">
		<!-- Your popup content -->
		... your content for popup 2 goes here ...
		<!-- / Your popup content -->
	</div>
</div>

// Plugin invoke
$(document).ready(function () {
    $("#popup-1").slickModals({
        ... settings for popup 1 ...
    });
    $("#popup-2").slickModals({
        ... settings for popup 2 ...
    });
});

You can also check out the demo inside 2. Demo layouts/7. Multiple popups folder.

You can specify the popup initial width and height in pixels or percentages and use those values for responsivnes. You can also fine tune it via css media queries. For example - we wish the modal window has a 90% screen width at 480px viewport and smaller:

	
@media screen and (max-width: 480px) {
	.slickModal .window {
		width: 90% !important;
	}
}

To hide a modal simply add a class "closeModal" to element that submits the form. For example, if you have input that submits the form you can add a class to it:

	
<input type="submit" class"closeModal-1" value="Submit" />

As mentioned, to hide a modal simply add a class to element you wish (same as the previous answer).

Altough Slic Modal is not made as a plugin or module it can still be installed manualy into any CMS. You can follow the quick install guide by editing coresponding CMS template files. Be sure to create backup before manual installation.

As window is absolutely positioned it needs margin auto in certain locations. You set these values with windowMargin within plugin settings upon invoke. For example:

- TopCenter location needs windowMargin: 0 auto (0 can be any desired value),
- Left / right location also needs windowMargin: 0 auto (0 can be any desired value).

Sometimes when using various libraries on the site (like prototype, mootols and others) it might get in conflict with jQuery and the plugin or other script might not work. In that case instead of using jquery.slick-modals.min from js folder you can use noConflict plugin which is located in 1. Quick start/js/noConflict folder.

The demos in that folder are for reference and demo purpouses only for your ease of use. You can use them for your own projects, but the support for modifications and extended functionality of those demos is not provided.

Edit the Slick css and search for content: "Close" with the editors search command if you are using minified Slick css or look for the following selector and change the text inside the content attribute:

.slickModal .close.text:before {
	color: #fff;
	content: "Close";
	font-size: 9px;
	text-transform: uppercase;
}

Open the Slick Modal jQuery and add a background url to the overlayBgColor option, like this:

	overlayBgColor: "url('images/bg.jpg') no-repeat center center / cover",

You can also check out the demo inside 2. Demo layouts/8. Background image folder.

You can do that by wrapping the plugin options inside the Slick Modal jQuery file inside the if statement. As an example below we wrapped the plugin options inside the if statement which will show the popup only on page which contains "yourUrl" string inside the url:

// Plugin invoke
$(document).ready(function () {
    if (window.location.href.indexOf("yourUrl") > -1) {
        $("#popup-1").slickModals({
            // Functionality
            popupType: "delayed",
            delayTime: 1000,
            exitTopDistance: 40,
            scrollTopDistance: 400,
            setCookie: true,
            cookieDays: 0,
            cookieTriggerClass: "setCookie-1",
            cookieName: "slickModal-1",

            // Overlay options
            overlayBg: true,
            overlayBgColor: "rgba(0,0,0,0.85)",
            overlayTransition: "ease",
            overlayTransitionSpeed: "0.4",

            // Background effects
            bgEffect: "scale",
            blurBgRadius: "2px",
            scaleBgValue: "0.9",

            // Window options
            windowWidth: "500px",
            windowHeight: "300px",
            windowLocation: "bottomRight",
            windowTransition: "ease",
            windowTransitionSpeed: "0.4",
            windowTransitionEffect: "zoomIn",
            windowShadowOffsetX: "0",
            windowShadowOffsetY: "0",
            windowShadowBlurRadius: "20px",
            windowShadowSpreadRadius: "0",
            windowShadowColor: "rgba(0,0,0,0.3)",
            windowBackground: "rgba(255,255,255,1)",
            windowRadius: "12px",
            windowMargin: "30px",
            windowPadding: "30px",

            // Close and reopen button
            closeButton: "icon",
            reopenClass: "openSlickModal-1",
        });
    }
});

You can disable the popup's type so it's not delayed, scroll or exit simply by leaving empty quotes in the plugin popupType options like this:

$(document).ready(function () {
    $("#popup-1").slickModals({
        // Functionality
        popupType: "",
        ...
    });
});

Countdown in the demos is made by 3rd author. That author provides simple explanation within the plugin comments and on it's website: jCounter which should be fairly easy to setup. Within the plugin you can also change the timezone and translations.

Tricks and tips

In order for popup's to show properly you shouldn't mix popup types when using multiple popups. For example, popup-1 can have a delayed type, but popup-2 should have scrolled or exit type. Keep an eye so that popups don't overlap themselfs.

Blur & scale are nice effects but they also affect the site performance as it has to redraw all the elements upon firing the animation. So to make your site more user friendly it's recommended to use lower blur and scale values. Optimal is 1-2 px for blur and 0.9 or 1.1 for scale. It's not recommended to use them both simultaneously on the same page as it will reduce the performance of the site dramatically.

If you're stuck with your layout and have issues you can't fix immidiately, i recommend you first try to debug the site with firebug or native browser element inspector (eg. right click --> Inspect element).
This will also help you build your custom layout faster and understand the shematics of how things work in Slick Modal popup.

From the performance point it is good practice to use minifed css and js version of the Slick Modal.

Additional notes

Special thanks for jCounter countdown plugin to Catalin Berta.

Support

If you get stuck with the installation, usage or modification of the item's, contact me via email support@justcapelle.com or send me a message on Codecanyon.
When you submit a support ticket, please provide much information as possible, for example:

- Your Envato username
- Detailed issue
- URL where you use the item


Thank you again for using Slick Modal. Dont forget to rate :)