Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and a bit of JavaScript. This project is a Modal Popup Box.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them as you want for free.
Recently I created a 3D flip profile card UI design using HTML and CSS. I also share this source code in the blog post here you can check this 3D flip profile card UI design.
Popup box on the website
A popup box, also known as a modal window or dialog box, is a graphical user interface element that appears on top of a webpage. It usually contains information or a call-to-action that requires the user’s attention, such as a newsletter subscription form, a login prompt, or a message confirming an action.
Popups can be triggered by various events, such as clicking on a button, leaving a website, scrolling to a certain point on the page, or after a set amount of time. They can be useful for providing additional information or prompting the user to take a specific action, but they can also be intrusive if overused or poorly designed.
About This Project
This project was Created by the Coding Pakistan blog website to help students for free of cost that is learning this type of programming languages, learning web development technologies such as HTML, CSS, JavaScript, React.js, and Next.js.
| Created by | Coding Pakistan |
| Languages | HTML and CSS |
| Source Code | Download GitHub |
| Preview | Take Preview |
In this project, you see the background color is a linear gradient, and in one popup box in this box you see one image you also replace this image with your image after that one heading “Get 50% OFF” and some text.
At the bottom of the popup box, I created a one-email subscription form if any person enters that email and clicks subscribe button then I received a email in my Excel sheet.
The best part of this popup design it is very simple and also very beautiful. if you are a beginner in coding and programming this project is best for your learning.
The source code of this project is also available in my GitHub Profile which you can download and use this code without any type of restriction.
How Does This Popup Work?
Actually, this popup is a website leaving popup. When users visit your website using Google search or social media like Facebook, or Instagram suppose your site not working properly or your user is not interested in your products or services when the user going to leave your website then this popup is displayed to the user.
After that, some users enter their email and subscribe to your newsletter but some are canceled and move to your competitor’s website. This method is best for getting emails for users and sending a newsletter to your potential customers.
How To Create a Mouse Leaving Popup Box
There are some steps to create this type of card hover effect using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- Also, link the JavaScript file with the HTML file using this line of code <script src=”script.js”></script>
- The last step is copying and pasting the given code into your files.
Source Code of Mouse Leaving Popup Box
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by www.codingpakistan.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Leave popup - Coding Pakistan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
</div>
<div id="modleBox">
<img src="banner.png" width="100%">
<div class="offer-text">
<h2>Get 15% OFF</h2>
<small>on all beauty products</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, assumenda accusantium? Delectus, beatae.
Assumenda quae distinctio quis est inventore.</p>
<form action="">
<input type="email" placeholder="Email Address">
<button type="submit">Subscribe</button>
</form>
</div>
<img src="close.png" class="close-icon" onclick="closeModel()">
</div>
</body>
<script src="script.js"></script>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
font-family: Georgia, sans-serif;
box-sizing: border-box;
}
.container{
width: 100%;
height: 100vh;
background-image: linear-gradient(45deg, #4f639b, #fff);
}
#modleBox{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 400px;
background: white;
border-radius: 5px;
overflow: hidden;
display: none;
transition: .5s;
}
.offer-text{
padding: 20px 40px 40px 40px;
font-size: 14px;
line-height: 22px;
}
.offer-text h2{
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
}
.offer-text small{
display: inline-block;
color: #ff2b4e;
font-weight: 600;
margin-bottom: 20px;
}
.offer-text form{
margin-top: 30px;
display: flex;
background: #efefef;
border-radius: 4px;
}
.offer-text form input{
flex: 1;
border: 0;
outline: 0;
background: transparent;
padding: 12px 10px;
}
.offer-text form button{
border: 0;
outline: 0;
cursor: pointer;
background: #ff2b4e;
color: white;
padding: 0 15px;
border-radius: 4px;
}
.close-icon{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
JavaScript FILE
let modleBox = document.getElementById("modleBox");
document.onmouseleave = function(){
modleBox.style.display = "block";
}
function closeModel(){
modleBox.style.display = "none"
}
Video Tutorial – Mouse Leaving Popup Using HTML, CSS, and JavaScript
If you don’t understand this code and you want to learn in deep so please watch this video and subscribe to this youtube channel for more videos like this.
Related Content
- Responsive Team section Desing using HTML and CSS
- Footer Menu Design using HTML and CSS with source code.
- Build a movie app using HTML, CSS, and JavaScript
Conclusion
Creating a modal popup box using HTML, CSS, and JavaScript is a simple and effective way to display important information or prompts on your website.
By following the steps outlined in this blog post, you can create your own custom modal popup box that suits your website’s design and functionality needs. Remember to keep your code clean and organized, test thoroughly, and optimize for usability and accessibility.
With these tips in mind, you can create a seamless user experience that enhances the functionality and overall appeal of your website.
