Create a Simple Modal Popup
Sanish Manandhar
I post about programming concepts and personal finance | Software Engineer
Create a Simple Modal Popup
When you visit a website have you ever noticed that some websites have an advertisement, announcement, or some image popping up immediately after you visit their website?
What a brilliant way to display your announcements or advertisements to new or old users instantly as they land on your home page, right?
Not getting what I am talking about?
Click on this DEMO-1 or DEMO-2 to see what I am talking about.
This is called a pop up modal. A modal that pops up as soon as a user lands on your page.
So, today I am going to show you a basic method of how you can create a pop up modal for your website.
Sticking to the very basics, I will be using a beginner’s stack of HTML, CSS, and JQuery to create this.
Now let’s start and follow along with me.
Step 1 — Create a basic folder structure.
- Create a folder named popup_modal inside any directory.
- Open the folder in any of your favorite code editors. My personal favorite is the VS code.
- Then create a file named index.html inside your popup_modal folder, this file will be your main entry point or we can say a default home page for your website.
- Then create another folder named resources inside your popup_modal folder which will have your CSS and js files.
- Now, at last create two folders named CSS and js, inside which create a styles.css and script.js file respectively.
Step 2 — Let’s write some page markup (HTML Codes)
- First of all, open your index.html file and write a basic skeleton for HTML as below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pop Up Modal</title> </head> <body> <h1>Pop up modal tutorial</h1> </body> </html>
- Then we will add links to our styles.css and script.js file inside the <head> tag and <body> tag respectively, along which we will also add a jQuery CDN inside our <head> tag so that we can make use of jQuery in our script as shown below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Link to custom css(styles.css)--> <link rel="stylesheet" href="./resources/css/styles.css"> <!--CDN link to jQuery--> <script src?="<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>"></script> <title>Pop Up Modal</title> </head> <body> <h1>Pop up modal tutorial</h1> <!--Link to custom js (script.js)--> <script src="./resources/js/script.js"></script> </body> </html>
- Finally, we will add markup for creating a modal inside the <body> tag.
<!--MODAL -->
<div class='modal' id='modal'>
<!-- MODAL CONTENT -->
<div class='content'>
<!-- For the close button -->
<span class="close" id='close'>×</span>
<!-- Actual content -->
<div>
<h1>This is a pop up modal</h1>
</div>
</div>
</div>
Current Outcome
Not as expected I guess ?? .
But wait we have still got some CSS magic to do ?? .
Step 3 — CSS magic.
Now we will start writing some CSS for the modal.
CSS (Cascading style sheet) determines how our HTML elements look like.
You can just copy the following codes inside your styles.css file.
//for the whole modal component
.modal {
position: fixed;
z-index: 9999;
padding: 50px 0 50px 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, .4);
}
//for the content inside the modal
.content {
width: 50%;
border: none;
background-color: #fbfdfe;
margin: auto;
padding: 15px;
border-radius: 10px;
overflow: hidden;
text-align: center;
box-shadow: 1px 1px 14px 3px rgba(0,0,0,0.75);
}
//for the close (X)
.close {
color: #aaa;
float: right;
font-size: 30px;
font-weight: 700
}
//when we hover on the close (X)
.close:focus,
.close:hover {
color: #000;
text-decoration: none;
cursor: pointer
}
Final Outcome
Now things are coming to shape.
Wait a minute… the close does not work when clicked?
Its ok folks, don’t worry we have still another thing to configure, that is the script.js.
Step 4 — Writing some jQuery
jQuery is just a library for JavaScript which makes it easier to write JavaScript on our website and the codes are lesser.
We are not going to write a very complex script here.
- First of all, we will make the close (X) clickable and see that it works. So just paste the following code in your script.js file.
//the first line of code states that the script will run only after the page has loaded
//and the script is ready to be executed.
$(document).ready(function ()
{
//select the close by class and apply a click even listener
$(".close").on("click", function ()
{
//select the modal element by id , and apply display none when close is clicked
//this will close the modal on click
$("#modal").css("display", "none")
});
});
So now we can see that after writing the above code in the script.js file we can close the modal by clicking on the close (X) on the top right corner of the modal.
The outcome that we have is that the modal popup on page reload and we can close the modal with the close (X) on the top right corner of the modal.
But what we want is that the modal appears only at the first load of the page and then no more until we open the page in a new tab.
Because the modal popping up on every refresh can be quite annoying as well.
Bonus 1 — Make the modal appear only on the page first load.
For this, we need to do only two things
- Add a CSS property { display: none } in the modal class shown below.
.modal {
position: fixed;
z-index: 9999;
padding: 50px 0 50px 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, .4);
display: none; /*added property */
}
This will set the modal to display none by default, that is the modal won’t show by default.
- To show the modal we need to trigger an event by using jQuery, add the following code in your script.js file
//this code snippent will check if the modal is present or not at the first session / loading
//of the page, and if not then the display property of the modal will be set to block
//and the modal shall appear
if(sessionStorage.getItem('#modal') !== 'true')
{
$('#modal').css('display','block');
//then the modal will be set true in the current session due to which the modal won't
//reappear on the refresh, we need to reload the page in a new tab to make the modal
//reappear.
sessionStorage.setItem('#ad_modal','true');
}
Conclusion
Finally, we have created a basic skeleton for a modal pop up that will appear only on the first load of the page.
This was just to show how easy it is to create a modal, and yet it does play a vital role in a website, and this is only one way to create a modal.
We can also use bootstrap to create one too, but I wanted this tutorial to be a more at a beginner’s level.
We can put any type of content inside the content <div> of the modal, for example, a poster or a subscription form.
You can see some example of how I have implemented modals in some actual website clicking on the following links-
Never Stop Learning, Keep Trying.