First i have created a normal html startup code then create a form.
Click me button then you will show a popup.
Full Source Code:
HTML: index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Simple popup using CSS</title>
<link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="popup-link">
<a href="#popup1">Click Me for Popup</a>
</div>
<!--popup1-->
<div id="popup1" class="popup-container">
<div class="popup-content">
<a href="#" class="close">×</a>
<h3>Popup 1</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</body>
</html>
CSS: style.css
.popup-link{
display:flex;
flex-wrap:wrap;
}
.popup-link a{
background: #333;
color: #fff;
padding: 10px 30px;
border-radius: 5px;
font-size:17px;
cursor:pointer;
margin:20px;
text-decoration:none;
}
.popup-container {
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
transform: scale(1.3);
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(21, 17, 17, 0.61);
display: flex;
align-items: center;
}
.popup-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.popup-content p{
font-size: 17px;
padding: 10px;
line-height: 20px;
}
.popup-content a.close{
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
background: none;
padding: 0;
margin: 0;
text-decoration:none;
}
.popup-content a.close:hover{
color:#333;
}
.popup-content span:hover,
.popup-content span:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.popup-container:target{
visibility: visible;
opacity: 1;
transform: scale(1);
}
.popup-container h3{
margin:10px;
}
/*End popup styles*/
You also find WordPress Plugins Feedback Form Users
Simple popup using html and css without Js
Reviewed by Md Shahinur Islam
on
October 30, 2022
Rating:
Reviewed by Md Shahinur Islam
on
October 30, 2022
Rating:
No comments: