본문으로 건너뛰기

Modal Operations and Interactions

We will implement modal operations and interactions using JavaScript.


Basic Operating Principle

The basic operating principle of a modal is to control its visibility to the user by manipulating the display property. Initially, it is set to display: none; so it does not appear on the screen.


Showing/Hiding Modals Using the display Property

To show or hide a modal, you can use JavaScript to toggle the display property between block and none.

const modal = document.getElementById('modal');

// Show the modal
modal.style.display = 'block';

// Hide the modal
modal.style.display = 'none';

Function of the Zoom Button

When the zoom button is clicked, the size of the modal content is enlarged.

This can be implemented by adding or removing a specific class (e.g., full).

const sizeBtn = document.querySelector('.size-btn');

sizeBtn.addEventListener('click', function () {
modalContent.classList.toggle('full');
});

Style Changes on Clicking the Zoom Button

When the full class is applied, the modal content expands to the full size of the screen, and the background color and other styles are changed.

CSS
.modal-content.full {
width: 100vw;
height: 100vh;
background-color: transparent;
}

Animation and Transition Effects

When the modal is displayed, smooth transition effects are applied to enhance the user experience.

Fade-in and scale effects for the modal: The modal content gradually appears while its size is adjusted.

CSS
@keyframes modalContentFadeInScale {
from {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 1;
transform: scale(1);
}
}

.modal-content {
animation: modalContentFadeInScale 0.3s ease;
}

The close icon is enhanced with a sparkling shimmer effect.

CSS
@keyframes shimmer {
0% {
background: #e6e6e6;
}
50% {
background: #f2f2f2;
}
100% {
background: #e6e6e6;
}
}

.close-img {
animation: shimmer 1.5s infinite;
}