JQuery Modal: The Best Bootstrap Modal Alternative

JQuery Modal: The Best Bootstrap Modal Alternative


Modals are very important in any website or web-page. they help us to give certain message to a particular user whereas it can also be used for user interaction as taking an 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 plane 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 then 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 on click of a link or a button to perform any action such as displaying a message or taking a input or displaying an 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 behaviour 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 your 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 a 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>
</div>




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. Lets see 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 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









Example of JQuery Modal





Jquery Modal




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









0 Comments: