Facebook SDK

Modals are very important in any website or web page. they help us to give a certain message to a particular user whereas it can also be used for user interaction as taking input from the user. in this tutorial, we will learn about JQuery Modal. a simple Bootstrap alternative

Now, we have so many Modals such as Bootstrap modal, Modal by Materialise css, simple modal made with plain HTML, CSS and JavaScript and etc. and today I'm going to tell you a better one which looks more simple and is easy to implement than Bootstrap modal which you can use in your website, web app or web project.

What is a Modal?

In Web development, a modal is a popup that appears with the click of a link or a button to perform any action such as displaying a message or taking an input or displaying output.

What is jQuery Modal?

jQuery Modal is a Modal Library built on top of jQuery by @kylefox. It lets you create Modal popups with ease. I repeat With Ease! no Large chunk of Code Required :)

Features of jQuery Modal

➡️Automatic binding using HTML semantics

➡️No images & light-weight (about 1k minified)

➡️Simple markup makes it easy to style

➡️Attach custom behavior using jQuery events

➡️Close with click or ESC key

➡️Built by @kylefox 

How to Install jQuery Modal

In order to use jQuery modal in your website or web App you have to include the below files in your website or Web app. The needed files are:

jQuery library

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Javascript File (.js)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

CSS File (.css)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

After you include these three files in your HTML document you're ready to go!

How to use jQuery Modal

It's very simple to use the jQuery modal, lets see how

First, create a <div> and give it an Id. And a class of "modal" as shown below:

<div id="ex1" class="modal">
<p>Thanks for clicking. That felt good.</p>
<a href="#" rel="modal:close">Close</a>

The id which you give will be used to trigger the module, so consider giving the id as most suitable for your preference.

Now, once you create a <div> the next part is to create a button or link to Trigger it. Let's see the below code on  how to trigger the modal

<a href="#ex1" rel="modal:open">Open Modal</a>

The above code will display a link with the text "open modal" and whenever someone clicks on it. The modal will be shown.  See the example below:

You Might Like: How to Create JavaScript Countdown

Now let us see How Bootstrap Modal And JQuery Modal Look Different from one Another

Example of a Bootstrap Modal

Click here

Example of JQuery Modal

Click here

Advanced features

  • AJAX - You can display Content in the div which is fetched from an AJAX Request. Pretty cool right!

  • Multiple Modals - it allows you to open multiple modals within one modal.

  • Fade Transitions -it allows you to create Fade animations while displaying/closing the Modal.

And all that can be achieved very easily Hmm 👀 cool isn't it?

for More Information you can visit the official Website by clicking below


Work Smart, not Hard 😎

Some other Modal Plugins Alternative to Bootstrap

Post a Comment

Previous Post Next Post