본문으로 건너뛰기

Modal Style

How can we style the modal's overlay (Overlay, blurring the background behind the modal) and the inside of the modal?

HTML

<div id="modal">
<div class="modal-content">
<div class="modal-close">&times;</div>
<div id="modal-image"></div>
<div id="modal-text"></div>
</div>
</div>
  1. #modal: The outer container of the entire modal.

  2. .modal-content: The container that holds the main content inside the actual modal.

  3. .modal-close: The button to close the modal. &times; represents an 'X' shaped character.

  4. #modal-image: The area for displaying images.

  5. #modal-text: The area for displaying text.


CSS

CSS
#modal {
display: none;
position: fixed;
z-index: 20;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
  • #modal: Sets the background of the entire modal.
    • display: none;: Initially, the modal is not displayed on the screen.
    • position: fixed;: Keeps the modal fixed on the screen even when scrolling.
    • background-color: rgba(0,0,0,0.4);: Sets a semi-transparent black background to allow the background to be slightly visible.

CSS
.modal-content {
display: flex;
flex-direction: column;
gap: 12px;
background-color: white;
margin: auto;
padding: 32px 16px 16px 18px;
width: 95%;
position: relative;
max-width: 500px;
border-radius: 8px;
}
  • .modal-content: Sets the style of the actual modal window.
    • display: flex;: Arranges the internal elements in a flex layout.
    • flex-direction: column;: Aligns the elements in a vertical direction.
    • background-color: white;: Sets the background color of the modal window to white.

CSS
.modal-close {
color: #aaaaaa;
position: absolute;
font-size: 32px;
font-weight: bold;
right: 6px;
top: -10px;
}
  • .modal-close: Sets the style for the close button.
    • position: absolute;: Positions the button absolutely within the modal window. This allows it to be placed in the top right corner.

CSS
.modal-close:hover,
.modal-close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
  • Sets the style for when the mouse is hovered over or focused on the close button.

The CSS set up this way centers the modal window and uses a semi-transparent black background, ensuring that when the modal is active, it attracts the user's attention.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!