Skip to main content
Practice

Structure and Styling of a Modal

Let's style a modal using CSS.


Basic Structure of a Modal​

HTML tags and classes: A modal is wrapped inside a <div id="modal">. It is divided into three sections: header, image box, and footer.

<div id="modal">
  <div class="modal-content">
    <div class="modal-header">...</div>
    <div class="modal-img-box">...</div>
    <div class="modal-footer">...</div>
  </div>
</div>

Basic Styling of a Modal​

The modal is fixed to the entire screen with a semi-transparent black background.

CSS
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

The modal content has a white background and rounded corners.

CSS
.modal-content {
  background-color: #fff;
  border-radius: 4px;
}

Styling Buttons and Icons​

The close button is positioned at the top-right corner.

<div class="modal-header">
  <span class="close-btn">
    <img class="close-img" src="..." />
  </span>
</div>
CSS
.close-btn {
  cursor: pointer;
}
.close-img {
  width: 20px;
  height: 20px;
}

Images inside the modal are centered and have a maximum size constraint.

CSS
.modal-img {
  max-width: 100%;
  max-height: 500px;
  margin: 0 auto;
}

With this basic structure and styling, the modal will be effectively displayed.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.