В настоящее время у меня есть несколько javascript функций, примененных к нескольким кнопкам, которые вызывают всплывающее окно, показывающее больше контента. Я хочу создать функцию, которая запускает анимацию размытия фона после нажатия любой из этих кнопок и другую анимацию, в которой всплывающее окно скользит сверху. Любая помощь будет признательна
document.querySelectorAll(".button a").forEach((a)=>{a.addEventListener("click",toggle);});
document.querySelectorAll(".popup a:last-child").forEach((a)=>{a.addEventListener("click",close);});
function toggle()
{
this.parentElement.nextElementSibling.classList.toggle("active"); //popup is sibling of a's parent element
}
function close()
{
this.parentElement.classList.toggle("active"); // .popup
}
Это CSS для этой функции.
.popup
{
display: none;
visibility: hidden;
position: fixed;
left: 50%;
transform: translate(-50%,-50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0,0,0,.30);
background: #A6A6A6;
}
.active
{
display: block;
top: 50%;
visibility: visible;
left: 50%;
}
И HTML:
<div class="container">
<div class="box button">
<a href="#">HURRICANE TRACK</a>
</div>
<div class="popup">
<h2>HURRICANE TRACKING</h2>
<video src="python_movies/hurricanetrack.mov"controls></video>
<p>
A Python project that prompts the user for a file containing hurricane information in order to form a dictionary that contains the names of hurricanes, the years the hurricanes occurred, and the correspoding data for each of the hurricanes, including the trajectory, longitude, lattitude, and wind speed. The program graphs all of the corresponding information by adding the information on a table, graphing the trajectory of the hurricanes, and plotting the information in a graph according to the wind speed.
</p>
<a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
</div>
<div class="box button">
<a href="#">NINE MEN'S MORRIS</a>
</div>
<div class="popup">
<h2>NINE MEN'S MORRIS</h2>
<video src="python_movies/ninemensmorris.mov"controls></video>
<p>
A Python Project that runs the game, Nine Men's Morris. Nine Men's Morris is a two player game that combines elements of tic-tac-toe and checkers. The board consists of a grid with twenty-four intersections or points. Each player has nine pieces. Players try to form 'mills'—three of their own men lined horizontally or vertically—allowing a player to remove an opponent's man from the game. A player wins by reducing the opponent to two pieces (where they could no longer form mills and thus be unable to win), or by leaving them without a legal move. The game proceeds in three phases, however, this project handles the first phase.
</p>
<a href="#" style="border: 2px solid; padding: 5px;">CLOSE</a>
</div>