In this article, I will show you a plugin I discovered that can be useful if you want to quickly design modal boxes for your website without the use of the Bootstrap framework ones.
First of all, check the demo of the result you will get at the end of this tutorial :
If you click on the green button in the demo website, you will see a simple popup / modal appearing at the center of your screen. I agree : it’s pretty simple… But it’s the aim of this tutorial! Here, we don’t want to waste some time with tons of options ; we want to be able to show modal boxes on our website in just a few minutes.
Integrating jQuery Modal on your Website
Of course, the first thing to do is to import the files of this plugin on your website.
Start by downloading the sources of jQuery Modal on the author’s GitHub. Unzip it and transfer the files jquery.modal.min.css and jquery.modal.min.js to your website.
Import the CSS like this :
<link rel="stylesheet" href="css/jquery.modal.min.css">And the JS file with jQuery like this :
<script src="js/jquery.min.js"></script>
<script src="js/jquery.modal.min.js"></script>Perfect, first step done 😉
Writing the HTML structure
Exceptionally in this tutorial, we won’t have to write any line of Javascript code. Being simple, this plugin allows us to show the modal and to control it mainly with HTML attributes. In our example, we will use a button that will have to be clicked to display the modal.
… so first, just create a button / link on your HTML page :
<a href="#" class="button">Show Modal</a>Now, we need to create the HTML element of our modal box that will contain its content :
<div id="modal-1" class="modal">
<p>That's the awesome content of my modal box!</p>
</div> Make sure to add a unique ID attribute to your modal container.
Now, we have our link to show the modal and our modal container. But how do we link them together? How do we know that when we click our button link, this modal we created will show up? As I said earlier, we will use HTML attributes 😉
jQuery Modal works with special attributes that we need to write on our HTML elements to control the modal. For example, to show it, we need to use the attribute rel with the value modal:open.
Just add this attribute with this value to our first link we created so it should now look like this :
<a href="#" rel="modal:open" class="button">Show Modal</a>… and finally, to target the modal we created, just reference its ID to the href attribute of our link (in our case, the ID of our modal is #modal-1) :
<a href="#modal-1" rel="modal:open" class="button">Show Modal</a>Perfect! If you reload your page and click your button, you should see the modal on your screen.
But in the demo, you can see that my modal also have a close link / button. We can also add it with the use of another special HTML attribute 😉
To add a close link, use the attribute and its value rel=”modal:close”. You can add this in the container of your modal, which should now look like this :
<div id="modal-1" class="modal">
<p>That's the awesome content of my modal box!</p>
<a href="#" rel="modal:close">Close</a>
</div> Now, if you click on the button to open your modal, you should also see a close link and when you click on it, it should simply close your modal 😉
There are other attributes that you can test by checking the official plugin documentation, here. You will also discover that you can use jQuery directly to control the modal, but I wanted to only go with HTML in this tutorial so it’s easier and quicker to integrate 😉
Hope it was clear enough for you. Don’t hesitate to check the other articles I have written and if you have any questions or need any help, just leave a comment below 🙂
Feel free to download the demo of this tutorial here :
… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :
