How to Create Simple Lightweight jQuery Modal Popup?

22 Oct , 2013  jQuery 

Lightweight jQuery Modal BoxThis tutorial explains how to create a simple and light weight modal popup box with pure jQuery.

Modal windows are a very common element in web development and wed designing. We see popups using jQuery in most of the website. Popups are used to show an alert, warning or piece of important information to the user. These popups can appear after submitting a form, after the page is loaded, or by ajax methods.

Today, we are going to create a simple light weight jQuery modal popup. In one of our previous tutorial, we saw how to load page inside a jQuery dialog box. Today, it is time to generate a lightweight jQuery modal popup using some HTML and CSS.

DEMO | DOWNLOAD

Let’s check out the code right below:

HTML Markup:

jQuery:

CSS for the pop:

Explanation

Let’s start with the HTML, here we have created a pop box to appear, which is set to hidden mode via jQuery. We have provided with a button to click and trigger the pop up window. The HTML and CSS are simple to understand. The pop up window can be closed either by clicking outside the pop up box, by clicking on the quit button with the popup window or by hitting ESC button on your keyboard.

The main code which does the magic of the pop up box is the jQuery plugin and the jQuery code snippet. In jQuery, when the popup trigger is clicked, then the below function runs to enable the popup:

Here we add the class “overlay” to the HTML document and class “visible” to the activePopup. By clicking outside the popup area, ESC button or Quit button the popup is closed using the below function, where we also set a transition timing for some animation while the popup is closed:

DEMO | DOWNLOAD

Hope you enjoyed the tutorial and was helpful. The above code can be modified and enhanced as per your requirements.



,

  • ELIA IGGA

    Great work with the popup, How can i make it responsive ?

    • have you tried it? is it responsive?

  • Sikander Zeb

    Thank you

  • Mariano

    Nice!

  • Can I have the page where this is not working? You should have missed something from the code.

  • magic

    This is also very simple pop-up :- http://www.magic2php.com/very-simple-popup/
    single HTML file only you have to download that’s all.