Clicking on a photo and opening it in a popup modal will result in a different background color each time. The left or right arrow can also be used to change the background color again.
If you add this line to your JS code:
randomBackgroundColor(); //<-- NEW LINE
The randomBackgroundColor() function will assign a new color to the background of the popup element.
I trust this information has been useful.
For example:
// JavaScript code snippet
const images = [...document.querySelectorAll('.image')];
// Other JavaScript code goes here...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Additional CSS styles go here... */
<div class="popup">
<div class="top-bar">
<p class="image-name">img1.png</p>
<span class="close-btn">
<img src="Graphics/gallery_icon.svg" width="50px" class="close">
</span>
</div>
<button class="arrow-btn left-arrow"><img src="img/arrow.png" alt=""></button>
<button class="arrow-btn right-arrow"><img src="img/arrow.png" alt=""></button>
<img src="img/img1.png" class="large-image" alt="">
<h1 class="index">01</h1>
</div>
<div class="gallery">
<div class="gallery-image">
<img src="img/img1.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img2.png" alt="" class="image">
<div class="bk"></div>
</div>
<div class="gallery-image">
<img src="img/img3.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img4.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img5.png" alt="" class="image">
</div>
<div class="gallery-image">
<img src="img/img6.png" alt="" class="image">
</div>
</div>