Animated Popup Modal Box Using HTML CSS & JavaScript
# To create a Animated Popup Modal Box Using HTML CSS & JavaScript Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a Animated Popup Modal Box Using HTML CSS & JavaScript Select Menu and apply a tilt effect to it. Here's an example:
1. First, create a container element in HTML for theAnimated Popup Modal Box:
<section>
<div class="profile">
<div class="profile-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXuL9uc_e2E1u2RawdgRby98m_UpbD7OHQhA3SppH6pVoscY1A5bdq2MnbV9x8Gko4Jno32QoLtXN3usfm-P7fosY_w8lCZiLRcxB1JsqU285XZKzKQtaXI6Yqha5B3vsMtlN0Ifv3FMuyYOmZiES1lx6JmLJbfCNNNCQ7agtZ5pbWQ/s1600/Group%202.png" alt="">
</div>
<h2>Code Web 4u</h2>
<span class="profession">Web & Web Designer</span>
<div id="hireBtn" class="button">
<button>Subscribe</button>
</div>
</div>
<!-- popup box start -->
<div class="popup-outer">
<div class="popup-box">
<span class="close" id="close">×</span>
<div class="profile-text">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXuL9uc_e2E1u2RawdgRby98m_UpbD7OHQhA3SppH6pVoscY1A5bdq2MnbV9x8Gko4Jno32QoLtXN3usfm-P7fosY_w8lCZiLRcxB1JsqU285XZKzKQtaXI6Yqha5B3vsMtlN0Ifv3FMuyYOmZiES1lx6JmLJbfCNNNCQ7agtZ5pbWQ/s1600/Group%202.png" alt="">
<div class="text">
<h2>Code Web 4u</h2>
<span class="profession">Web & Web Designer</span>
</div>
</div>
<div>
<p class="text">Do you want to subscribe my youtube channel?</p>
<div class="button">
<button id="close" class="No">No</button>
<button class="yes"><a href="https://www.youtube.com/c/CodMark4"
target="_blank">Yes</a></button>
</div>
</div>
</div>
</div>
</section>
2. Next, add some CSS to create a Animated Popup Modal Box and position the container in the center:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
overflow: hidden;
}
a {
text-decoration: none;
color: white;
}
section {
position: relative;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
section .profile {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
section.show .profile {
display: none;
}
section .profile .profile-img {
height: 6rem;
width: 6rem;
border-radius: 50%;
background: #0000008a;
padding: 5px;
margin-bottom: 10px;
}
.profile .profile-img img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 3px solid #fff;
}
.profile .name,
.profile .profession {
font-size: 18px;
font-weight: 500;
color: #333;
}
.profile .profession {
font-weight: 400;
margin-top: -6px;
}
.profile .button {
display: flex;
align-items: center;
padding: 12px 20px;
background: #0000008a;
margin-top: 10px;
border-radius: 9px;
cursor: pointer;
transition: all 0.3s ease;
}
.profile .button:hover {
background: #000;
}
.profile .button button {
background: none;
outline: none;
border: none;
font-size: 20px;
color: #fff;
pointer-events: none;
}
section .popup-outer {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
transform: scale(1.2);
transition: all 0.3s ease-in-out;
}
section.show .popup-outer {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
section .popup-box {
position: relative;
padding: 30px;
max-width: 380px;
width: 100%;
background: #fff;
border-radius: 12px;
}
.popup-box .close {
position: absolute;
top: 16px;
right: 16px;
font-size: 24px;
color: #b4b4b4;
cursor: pointer;
transition: all 0.2s ease;
}
.popup-box .close:hover {
color: #333;
}
.popup-box .text {
margin-top: 13px;
}
section .popup-box .profile-text {
display: flex;
align-items: center;
}
section .popup-box img {
height: 65px;
width: 65px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #ff0076;
}
.profile-text .text {
display: flex;
flex-direction: column;
margin-left: 15px;
}
.profile-text .text .profession {
font-size: 12px;
font-weight: 500;
opacity: 0.6;
}
section .popup-box .button {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
.popup-box .button button {
outline: none;
border: none;
padding: 6px 12px;
border-radius: 6px;
background: #6f93f6;
margin-left: 8px;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.button button.No {
background: #0000008a;
}
.button button.No:hover {
background: #000;
}
.button button.yes:hover {
background: #275df1;
}
3. Use JavaScript to create a Animated Popup Modal Box element inside the container:
const section = document.querySelector("section"),
hireBtn = section.querySelector("#hireBtn"),
closeBtn = section.querySelectorAll("#close")
hireBtn.addEventListener("click", () => {
section.classList.add("show");
});
closeBtn.forEach(cBtn => {
cBtn.addEventListener("click", () => {
section.classList.remove("show");
});
});
#Animated Popup Modal Box in HTML, CSS & JS For Full Code 👇
* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create Animated Popup Modal Box html css |Animated Popup Modal Box in css` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.
Post a Comment