Hello coders!! In this article creates a Popup Message Using HTML and CSS. In this project, we will create a button, and when the user clicks on it, a Popup Message with some content will be displayed on the screen. This project is simple and suitable for beginners.
Popup Message Using HTML
I hope you must have got an idea about the project.
So, Let’s Begin the expandable content Project By Adding The Source Codes. first We Are Using The Html Code.
Step1: HTML Popup Message Code
HTML stands for Hyper Text Markup Language, and it provides structure to our website.
ALL HTML documents begin with <!doctype HTML>, which informs the browser that our code adheres to the most recent HTML version.
The HTML document starts with and ends with .
The main tag is
, where we will write all of our content that will be displayed on the browser later.Now we'll take a look at our HTML code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="" />
<title>Popup Message</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Popup Message</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, Please follow us <a href="https://www.codewithrandom.com/" target="_blank">@codeWithrandom</a>
</div>
</div>
</div>
</body>
</html>
First, we will use an H1 tag to create the main heading of our webpage.
Now we will create a div, and inside it we will make a button using button tag.
We’ve created a div with class overlay to cover all the page content when the popup is displayed. This forces the user to close the popup before returning to the page content and also creates a nice user experience. The div with class popup will be our popup, containing the heading and close popup icon. The div with class content will contain the content of our popup.
Now let's take look at our output
So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.
Step2: CSS Code For Popup Message
Cascading Style Sheets is a style sheet language that is used to describe the presentation of a document written in a markup language like HTML or XML.
Now we will look at our CSS code.
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
overflow: hidden;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #fff;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Now that we've included our CSS code in our article, let's go over it step by step.
Step1: First, we chose our body tag and set the font family to Arial, the background to an image, and the background size to cover. We set Overflow to hidden to prevent unwanted horizontal scrolling and extra whitespace in your project when elements exist outside the viewport.
Now we will style our main heading of the webpage using h1 tag. We aligned the text to center and color as white and top and bottom margin as 80px.
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
overflow: hidden;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #fff;
margin: 80px 0;
}
Step2: Using the class ".box," we'll set the width of our div tag to 40% and the padding to 35px. Set the text alignment to centre and the border to 2 pixels of solid white.
Using the (.button) class, we define the width and padding of our button as 1rem and 35px, respectively. We also added some transition to our button. We also added a hover selector; when the user hovers over the button, the background colour changes to green.
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
Step3: We now define the position of our popup window as fixed by using the ".overlay" class. Set the margin and padding to zero. The visibility is hidden and the opacity is set to zero. When we choose ".overlay: target," the visibility is set to visible and opactiy as 1.
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
Step4: We will now style our h2 using the ".popup" class, with a margin top of zero and a font family of Tahoma. We defined the position of our close icon as an absolute and font size of 20px and a font-weight of bold using the ".popup.close" class.
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
Step5: In this step, we will make our webpage as responsive as possible by using a media query to set the maximum width of the screen to 700 px. The popup window width will be 70% if the screen size is equal to or less than the screen size we specified.
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Now we have completed our css code and belowhere is the output after styling our webpage.
Now as we completed our project now will look at how it is working.
Now We have Successfully created our Popup Message With Code. You can use this project for your personal webpage and We hope you understood the project , If you any doub't feel free to comment!!
If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Follow: codewithrandom
Written By : arun
Code by : Prakash
Top comments (0)