Как сделать 2 -е всплывающее окно? ⇐ Html

[Anonymous]

выше - ссылка на кодепен. По сути, я сделал всплывающее окно, которое работает правильно. Я сделал больше проектов, поэтому я сделал второе всплывающее окно, чтобы пойти рядом с ним, но сама вкладка не появится, если я не нажму 1 -м всплывающее окно. Идея состоит в том, чтобы иметь 2-ю вкладку прямо рядом с 1-й, и оба имеют свое собственное всплывающее окно, которое работает правильно.

Код: Выделить всё

    function togglePopup() {
document.getElementById("popup-1").classList.toggle("active");

}< /code>
    section{
min-height: 100vh;
padding: 5rem 9% 5rem;
}

.photo-gallery {
width: 90%;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}

.pic {
margin-top: 130px;
position: relative;
height: auto;
border-radius: 10px;
box-shadow: 3px 3px 5px lightgray;
cursor: pointer;
}

.pic img {
width: 100%;
height: 100%;
border-radius: 10px;
}

.website::before {
content: "This website!";
color: #000000;
text-align: center;
}

.popup .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: #949494b3;
z-index: 1;
}

.popup {
display: none;
}

.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
background: #fff;
width: 1310px;
height: 600px;
z-index: 2;
padding: 20px;
box-sizing: border-box;
border-radius: 15px;

}

.header {
text-align: center;
}

.popup-body {
display: flex;
text-align: left;
justify-content: space-between;
align-items: flex-start;

}

.popup-body img {
border-radius: 12px;
width: auto;
height: auto;
right: 50%;
}

.popup .close-btn {
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height: 30px;
text-align: center;
border-radius: 50%;
}

.popup.active {
display: block;
}

.popup.active .overlay {
display: block;
}

.popup.active .content {
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}

.pic::before{
position: absolute;
pointer-events: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
font-weight: bold;
width: 100%;
margin-top: -100px;
opacity: 0;
transition: .3s;
transition-delay: .2s;
}
.pic:after{
content: "";
pointer-events: none;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
border-radius: 10px;
height: 0;
background-color: #9f9f9f4a;
transition: .3s;
}
.pic:hover::after{
height: 100%;
}
.pic:hover::before{
margin-top: 0;
opacity: 1;
}

.Extended-Description {
font-style: italic;
font-weight: 500;
}

.tldr {
font-style: italic;
font-weight: 500;
}< /code>





[img]https://i.ibb.co/W5RWrch/Screenshot-2024-12-24-194906.png[/img]






×

This Website


TL:DR:

This portfolio website built from scratch using HTML, CSS, and JS!!

  Extended Description:

I started learning about HTML & CSS during the spring of 2024 while taking a AP CSP course.
Eventually (during the summer of 2024) I started to play around with these langanuges more and decided to pursue making
my own portfolio website after being inspired seeing a former classmate do something similar. I offically started this
project in October of 2024. This entire project has been a learning experience for me since I intially planned for it to
be complete simple, just bare bones basic HTML & CSS. But this project has become bigger than what I imagined with every feature
being added more and more until it seems fit.





[img]https://i.ibb.co/W5RWrch/Screenshot-2024-12-24-194906.png[/img]






×

This Website


TL:DR:

This portfolio website built from scratch using HTML, CSS, and JS!!

  Extended Description:

I started learning about HTML & CSS during the spring of 2024 while taking a AP CSP course.
Eventually (during the summer of 2024) I started to play around with these langanuges more and decided to pursue making
my own portfolio website after being inspired seeing a former classmate do something similar. I offically started this
project in October of 2024. This entire project has been a learning experience for me since I intially planned for it to
be complete simple, just bare bones basic HTML & CSS. But this project has become bigger than what I imagined with every feature
being added more and more until it seems fit.

Подробнее здесь: https://stackoverflow.com/questions/796 ... pup-appear