iziModal.js – A Truly Dynamic Modal Window jQuery Plugin

Most modal windows seem to distract and annoy the visitor with opt-in fields and unwanted deals. These modals often take over the whole page, look terrible, and don’t offer a clear way to close the window. Thankfully, iziModal.js is the exact opposite.

Creating Modal Window Easily With HTML5 Dialog

Creating Modal Window Easily With HTML5 Dialog

[series_html5css3] The modal window is one of the most common UI that we can find in websites. It…Read more

It’s one of the sleekest modal window plugins I’ve ever seen and it gets me excited to interact with modals again.


iziModal.js is a jQuery plugin so you do need a copy of the jQuery library for this to work. But it’s pretty lightweight and you can even include the library externally from CDNJS.

Note this plugin comes with a lot of different options. You can pass in options to style the modal size, frame type, and animation. But you can also create callback functions if the user closes a modal or clicks on a specific element.

You can find plenty of examples on CodePen but I really like the demos hosted on iziModal’s home page. Specifically, check out the iframe embed option where it has an autoplay Vimeo player queued up in the modal.

izimodal jsizimodal js

The design is magnificent and the modal really feels like it’s part of the interface. The quality of animation is impressive too, and it’s all powered with CSS3 & jQuery.

On the main plugin page, you’ll also find documentation tables with code snippets for each of the available demos. Here’s the shortest bit of code to use for a modal window popup.

$(document).on('click', '.trigger', function (event) {

The iziModal() function has over 45 different options that can be passed in to customize the modal window. It also has custom events that can trigger functions like when a modal opens, closes or goes full screen.

This is an unbelievably massive project and it’s easily one of my favorite modal window plugins from a design and usability standpoint.

To grab a copy of the source, you can either pull it through npm or download from GitHub. And if you have suggestions about the plugin or just want to share your thanks you can tweet the creator Marcelo Dolce @marcelodolce.

Create, Control & Customize Better Modal Window For Your Site Using Vex

Create, Control & Customize Better Modal Window For Your Site Using Vex

A modal window is very useful when you want to make users interact with your site. Occasionally, a…Read more

Source: http://www.hongkiat.com/blog/izimodal-js/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s