kModal by Kiku Solé

Install

Download files

Download kmodal.min.js (minified) and kmodal.css (minified), or kmodal.zip developer version.

CDN

Also you can include the files using my CDN.

JavaScript

<script src="http://cdn.kikusole.cat/kmodal/kmodal.min.js"></script>

CSS

<link rel="stylesheet" href="http://cdn.kikusole.cat/kmodal/style.css" media="screen">

Package manager

Install with npm:

npm install kmodal-js

Download from GitHub:

Download files via GitHub

Getting started

Include files

Include the kModal .css and .js files in your site.
Remember, last jQuery version is required.

JavaScript

<script src="/path/to/kmodal.min.js"></script>

CSS

<link rel="stylesheet" href="/path/to/kmodal.css" media="screen">

Initialize with jQuery

You should use kModal as a jQuery plugin: $('selector').kModal().
In the examples I will use the selector .k-class, but I recommend to change the selector class for every modal you create.

<!-- Click element -->
<a href="#" class="k-class"></a>

<!-- Modal -->
<div class="k-modal">
    <div class="k-container">
        Some text inside
    </div>
</div>

// Initialize modal
$('.k-class').kModal({
    // modal options
    animation: 'fadeIn',
    delay: 500
});

Plugin options

modalClass

The default and required classes are .k-modal and .k-container. If you want another modal class to identify each modal you create, specify your modal class.
Be carefull if you have more than one modal crated with the same class.

<a href="#" class="k-class"></a>

<div class="k-modal modal">
    <div class="k-container">
        Some text inside
    </div>
</div>

$('.k-class').kModal({
    // specify the modal class
    modalClass: '.modal'
});

type

All type of modals, specified here. The default is simple.

$('.k-class').kModal({
    // specify the type
    type: 'simple'
});

Show types documentation

animation

Check the different animations here. The default is false.

$('.k-class').kModal({
    // specify animation
    animation: 'fadeIn'
});

or you can specify k-animation in html:

<a href="#" class="k-class" k-animation="fadeIn"></a>

Show all animations

style

There are different styles designed and tested in multiple devices and browsers. In the developer version, there are a settings.scss file to create your custom style.

$('.k-class').kModal({
    // Fancy Blue Style
    style: 'fancy-blue'
});

or you can specify k-style in html:

<a href="#" class="k-class" k-style="fancy-blue"></a>

Show all styles

delay

Is the time it takes to open the modal (in milliseconds). You only have to specify the value, not the unit. The default value is 0ms.

$('.k-class').kModal({
    // Example: one second of delay
    delay: 1000
});

Try it!

Close options: showClose, disableClose and autoclose

The showClose option show or hide the close button, by default it's true, visible. In some cases, you don't want the user close the dialog, the disableClose option is true, the user can't close the modal, the default value is false. The autoclose is the time it takes to close the modal automaticaly (in milliseconds). You only have to specify the value, not the unit. The default value is false.

$('.k-class').kModal({
    showClose: false, // hide the close default button
    disableClose: true, // all the 'close' events are disabled
    autoclose: 5000 // the modal will close in 5 seconds
});

Try it!

addCloseBtn and closeBtnText

You can add a button inside the modal container with a custom text. The default value of addCloseBtn is false, and the default closeBtnText is Close.

$('.k-class').kModal({
    addCloseBtn: true, // Shows a close button
    closeBtnText: 'Accept' // Display 'Accept' text
});

Try it!

hash (History) and href

The hash option adds to URL a #hash when modal is opened, moreover, if the user load the page with this #hash in the URL, automatically, the modal will be opened
The href option complements the hash. When user loads the page and you wish to show image or content with AJAX, href helps you to load this.

$('.k-class').kModal({
    hash: '#viewmodal', // Example: example.com/#viewmodal
    href: 'example.com' // Or image href 
});

Try it!

autoplay

The autoplay option, make a YouTube or Vimeo video play automatically when modal is opened.
In the types section there are the specifications of embed use.
You must specify the type 'embed'.

$('.k-class').kModal({
    type: 'embed',
    autoplay: true
});

Try it!

autofocus

The autofocus option, find the first input or textarea in the form modal and focus the user to it.
In the types section there are the specifications of form use.
You must specify the type 'form'.

$('.k-class').kModal({
    type: 'form',
    autofocus: true
});

Try it!

embedType

$('.k-class').kModal({
    // 'youtube', 'vimeo' or 'googlemaps'
    embedType: 'youtube'
});

Show embed type documentation

onReadyOpen

Opens the modal when page is load. Also you can convine with delay option.
The default value is false

$('.k-class').kModal({
    onReadyOpen: true
});

Set Cookie: storeCookie, setCookieType, cookieName, cookieValue, cookieExpires

Store a cookie can be usefull to prevent the apparition of the modal, many times with a modal who appear when page is load. The cookie can be stored when the modal is opened on-opne, or if the modal is closed on-close with the cross, the close button or clicking on the outside area.
You can specify a custom cookieName and cookieValue, cookieExpires is the time that takes the cookie to disapear. The dafault value is 30 days. You can store a session cookie, this cookie will desapear when user closes the browser.
If you store a cookie on a modal who appear on click, the modal will not appear until the cookie is expired

$('.k-class').kModal({
    storeCookie: true,
    setCookieType: 'on-close, // on-close or on-open
    cookieName: 'testCookie',
    cookieValue: 'closed',
    cookieExpires: 30 // number of days
    // cookieExpires value can be 'session' to store while user session
});

Types

Image

Opens a image in a lightboox with a custom options.

First option

Simple usage example.

<!-- Click element -->
<a href="/path/to/image.jpg" class="k-class"></a>

$('.k-class').kModal({
    type: 'image'
});

Try it!

Second option

Example with href option.

<!-- Click element -->
<a href="#" class="k-class"></a>

$('.k-class').kModal({
    type: 'image',
    href: 'path/to/image.jpg'
});

Try it!

Embed

Opens a YouTube and Vimeo videos, or Google Maps address map with a custom options.

First option

Simple usage example. Adding the classes k-youtube for YouTube videos, k-vimeo for Vimeo videos and k-googlemaps for Google Maps iframe.

<a href="https://www.youtube.com/watch?v=videoID" class="k-class k-youtube"></a>
<a href="https://vimeo.com/videoID" class="k-class k-vimeo"></a>
<a href="Address Name" class="k-class k-googlemaps"></a>

$('.k-class').kModal({
    type: 'embed'
});

Youtube Vimeo Maps

Second option

Example with hash option and no extra classes.

<a href="#" class="k-class"></a>

$('.k-class').kModal({
    type: 'embed',
    hash: '#youtube',
    embedType: 'youtube', // Or 'vimeo' or 'googlemaps'
    href: 'https://www.youtube.com/watch?v=videoID' // Youtube
    // href: 'https://vimeo.com/videoID' Vimeo
    // href: 'Address Name' Google maps
});

Youtube hash

Form

Opens a modal with a form and can autofocus the first input or textarea.

<a href="#" class="k-class"></a>

<div class="k-modal">
    <div class="k-container">
        <form>
            <label for="name">Name</label>
            <input id="name" type="text">
            <button type="submit">Submit</button>
        </form>
    </div>
</div>

$('.k-class').kModal({
    type: 'form',
    autofocus: true
});

Try it!

AJAX

Opens a modal with the content loaded with AJAX request. Very usefull to save page loadtime.

First option

Example with hash option and no extra classes.

<a href="path/to/template.html" class="k-class"></a>
<!-- Also, you can call .php files -->

$('.k-class').kModal({
    type: 'ajax'
});

Try it!

Second option

Example with hash option and no extra classes.

<a href="#" class="k-class"></a>

$('.k-class').kModal({
    type: 'ajax',
    hash: '#ajax',
    href: 'path/to/template.html'
});

Try it!

Animations

fadeIn

animation: 'fadeIn'

Try fadeIn!

flipX

animation: 'flipX'

Try flipX!

flipY

animation: 'flipY'

Try flipY!

zoom

animation: 'zoom'

Try zoom!

fadeInUp

animation: 'fadeInUp'

Try fadeInUp!

fadeInDown

animation: 'fadeInDown'

Try fadeInDown!

fadeInLeft

animation: 'fadeInLeft'

Try fadeInLeft!

fadeInRight

animation: 'fadeInRight'

Try fadeInRight!

Styles

fancy-blue

style: 'fancy-blue'

Try fancy-blue!

dark-black

style: 'dark-black'

Try dark-black!

yellow-lime

style: 'yellow-lime'

Try yellow-lime!

yellow-freedom

style: 'yellow-freedom'

Try yellow-freedom!

I'm working in new Styles. More styles will be available soon in next updates.

Examples

1. Accept the privacy policy

In this case, maybe you want to open the modal when the page is load, for example to accept a privacy policy or legal conditions of a website.
Is recommended to use the onReadyOpen: true option, then the user can't close the modal if they don't accept the conditions.
Finally, we store a cookie to prevent the apparition of the modal the next time user visits the page.

Check this example with a click event:

Try it!

Code:

<a href="#" class="k-class"></a>

<div class="k-modal">
    <div class="k-container">
        <h1>Title 1</h1>
        <p>...</p>
    </div>
</div>

$('.k-class').kModal({
    disableClose: true,
    addCloseBtn: true,
    closeBtnText: 'Accept',
    animation: 'fadeInDown',
    storeCookie: true,
    setCookieType: 'on-close,
    cookieName: 'privacy',
    cookieValue: 'accepted',
    cookieExpires: 30
});

2. Images zoom

A simple image gallery with a lightbox.

Code:

<a href="path/to/image1.jpg" class="k-class"></a>
<a href="path/to/image2.jpg" class="k-class"></a>
<a href="path/to/image3.jpg" class="k-class"></a>

$('.k-class').kModal({
    type: 'image',
    animation: 'zoom'
});

Try it!

3. Login, Sign Up and Subscribe

Simple use of the form type is the creation of a modal to make the user to login, sign up or subscribe to mail list.

Code:

<a href="#" class="k-class"></a>

<div class="k-modal">
    <div class="k-container">
        <h1>Title</h1>
        <form>...</form>
    </div>
</div>

$('.k-class').kModal({
    autoclose: true,
    type: 'form',
    animation: 'fadeInDown'
});

4. Open recipe videos

Embed videos example with a recipe thumbnail that opens a video on click.

Pizza

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<a href="#" class="k-class k-youtube">
    <img src="path/to/image.jpg">
</a>

// YouTube video example
$('.k-class').kModal({
    type: 'embed',
    autoplay: true
});

5. Alerts or feedbacks

Quik example of the two type of feedback styles. First of all, an error modal that can be used, for example, when user tries to enter to protected page or when the form fields are incorrect, and then a success modal that can give a sent form response to user.

Try error! Try success!

Code:

<a href="#" class="k-class"></a>

<div class="k-modal">
    <div class="k-container">
        <h1>Error or success title</h1>
        <p>...</p>
    </div>
</div>

// Error example
$('.k-class').kModal({
    role: 'error',
    animation: 'fadeInDown'
});

// Success example
$('.k-class').kModal({
    role: 'success',
    animation: 'fadeInDown'
});

Caught a mistake or want to contribute to the documentation?
Please contact me or email to kiku@kikusole.cat.

Install

Download files

CDN

JavaScript

CSS

Package manager

Download from GitHub:

Getting started

Include files

JavaScript

CSS

Initialize with jQuery

Plugin options

modalClass

type

animation

style

delay

Close options: showClose, disableClose and autoclose

addCloseBtn and closeBtnText

hash (History) and href

autoplay

autofocus

embedType

onReadyOpen

Set Cookie: storeCookie, setCookieType, cookieName, cookieValue, cookieExpires

Types

Image

First option

Second option

Embed

First option

Second option

Form

AJAX

First option

Second option

Animations

fadeIn

flipX

flipY

zoom

fadeInUp

fadeInDown

fadeInLeft

fadeInRight

Styles

fancy-blue

dark-black

yellow-lime

yellow-freedom

Examples

1. Accept the privacy policy

2. Images zoom

3. Login, Sign Up and Subscribe

4. Open recipe videos

Pizza

5. Alerts or feedbacks

Form

Form

Title

Form example

Title 1

Login

Sign up!

Subscribe!

Error

Form send succefully!