Table of Contents
Introduction
HTML is a standard markup language. It is used to design web pages. It is the base language to develop a website. Developers use HTML5 frequently to develop Websites. Along with HTML, we may use other languages to make a website dynamic.
CSS (Cascading Style Sheet) is used for the styling of web pages. To give websites a professional look, CSS language is used. It is the way to make your website attractive. Professional look is very important to attract traffic towards your website.
JavaScript is a client side scripting language. It is very popular among the web developers to develop user friendly interface of web sites. In these days, a large number of websites are using this scripting language.
Here we are creating a Custom Popup by using CSS and JavaScript. CSS will be used to design the Popup and JavaScript will make it working. It is a easier way to design a customised popup for websites. Popups are used to give information about anything to users of a website. By default, we can use alert() function to create alert box to give any specific information to the users of a website. But, it can be done in a beautiful way by making a custom popup. In this tutorial, you will be able to learn the whole process to create a beautiful custom popup and make it a working one.
Uses of Popups
Popups are being used to give information about anything to the users of a website such as record updates, record insertion, record deletion etc. Popups can also be used to get user inputs from the users. With popup, you can get user inputs or provide any message to the users without leaving the main page. Instead of these, popups can also be used in many other purposes.
Requirements to Create Custom Popup
To create a custom popup, we need HTML5 as base language. Along with this, we need CSS for the styling of the popup and the web page. Also, we need JavaScript as client scripting language. It is essential to make the Popup active. To connect the popup with your work, we will need JavaScript.
Method of Creating Custom Popup
First of all, we should design a web page. In my case, I have designed a simple web page with a input text box and a button. I have applied CSS code to give the elements a beautiful look. Here, user needs to input his/her own name inside the text box. The the button should be clicked. After clicking the button, the popup will be displayed with a Welcome Message. There will be a close button in the bottom side of the popup to close the popup.
The background of the parent div is set as Black color (0.5 Alpha) in CSS. The background will be transparent through which the web page can be seen but can not be accessed. Main web page can not be accessed till the popup is opened.
Now, it is the time to create the popup. For creating this, we need to insert a div before </body> tag. The position of the div should be set as fixed. Under that div, we must create the popup div. In the popup, I have used two headings. One as heading and another for the dynamic welcome message. For the look, I have used a png image. Under the png image, I have inserted one button. The button is for closing the popup div. Styling CSS codes have been inserted with the <style></style> tags in the HTML5 document.
<!DOCTYPE html> <html> <head> <title>Custom Popup Menu</title> </head> <body> <center> <h2>Custom Popup Menu in HTML</h2> <input type="text" name="textbox" id="textbox" placeholder="Please Enter Your Name"> <p> <button class="btn" onclick="openFun()">Click Here</button> </center> <div class="over"> <div class="child"> <h1>Welcome,</h1> <h2 id="text">Text</h2> <img src="image.png" height="300px" width="350px"> <p> <button class="btn" onclick="closeFun()">Close</button> </div> </div> </body> </html>
CSS codes that used for styling the web page and the popup is mentioned below –
<style type="text/css">
#textbox{
width: 300px;
height: 25px;
font-size: 14px;
padding-left: 5px;
border-radius: 5px;
border: 1px solid #888;
outline: none;
}
.btn{
width: 150px;
height: 25px;
background: #000099;
border-radius: 5px;
color: #fff;
cursor: pointer;
outline: none;
border: 0;
}
.btn:active{
background: #08083f;
}
.over{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.child{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 400px;
height: 530px;
background: #fff;
border-radius: 7px;
animation: anim 0.7s ease 1;
}
@keyframes anim{
0%{
opacity: 0;
margin-bottom: 150px;
}
100%{
opacity: 1;
margin-bottom: 0;
}
}
</style>
A simple CSS animation has been added in the appearance of the popup. It gives a beautiful effect in the popup.
The popup will look like this –
The Web Page (without popup) will look like this –
Two functions openFun() and closeFun() have been inserted within the HTML page in two buttons. openFun() is inserted with the button of the web page and closeFun() function has been inserted in the button of the popup. It will close the popup. openFun() function will open the popup after getting the value from the text box of the web page.
<script type="text/javascript">
function openFun(){
if(document.getElementById("textbox").value != ""){
document.getElementById("text").innerHTML = document.getElementById("textbox").value + "...";
document.getElementsByClassName("over")[0].style.display = "flex";
}else{
return false;
}
}
function closeFun(){
document.getElementsByClassName("over")[0].style.display = "none";
}
</script>
The whole HTML document is given below –
<!DOCTYPE html>
<html>
<head>
<title>Custom Popup Menu</title>
<style type="text/css">
#textbox{
width: 300px;
height: 25px;
font-size: 14px;
padding-left: 5px;
border-radius: 5px;
border: 1px solid #888;
outline: none;
}
.btn{
width: 150px;
height: 25px;
background: #000099;
border-radius: 5px;
color: #fff;
cursor: pointer;
outline: none;
border: 0;
}
.btn:active{
background: #08083f;
}
.over{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.child{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 400px;
height: 530px;
background: #fff;
border-radius: 7px;
animation: anim 0.7s ease 1;
}
@keyframes anim{
0%{
opacity: 0;
margin-bottom: 150px;
}
100%{
opacity: 1;
margin-bottom: 0;
}
}
</style>
<script type="text/javascript">
function openFun(){
if(document.getElementById("textbox").value != ""){
document.getElementById("text").innerHTML = document.getElementById("textbox").value + "...";
document.getElementsByClassName("over")[0].style.display = "flex";
}else{
return false;
}
}
function closeFun(){
document.getElementsByClassName("over")[0].style.display = "none";
}
</script>
</head>
<body>
<center>
<h2>Custom Popup Menu in HTML</h2>
<input type="text" name="textbox" id="textbox" placeholder="Please Enter Your Name">
<p>
<button class="btn" onclick="openFun()">Click Here</button>
</center>
<div class="over">
<div class="child">
<h1>Welcome,</h1>
<h2 id="text">Text</h2>
<img src="image.png" height="300px" width="350px">
<p>
<button class="btn" onclick="closeFun()">Close</button>
</div>
</div>
</body>
</html>
Conclusion
It can be concluded that, popups are very useful for websites. Customised popups can change the look of a website. It gives the websites a professional look. Above mentioned process is a very easy process to create a custom and interactive popup for your website.
Thank you.
You Also can Read
Develop Age Calculator with HTML5 and PHP
