Skip to main content
Practice

What is a Modal?

In web design, a "modal" is a user interface (UI) element that captures the user's attention to highlight specific content or actions.

Modals are commonly used in the following scenarios:

  • Alert Messages - To convey important notifications to the user

  • Confirmation Messages - To confirm important actions (e.g., asking for user confirmation before deleting data)

  • Form Submissions - To collect information from the user (e.g., login window, sign-up form)


Template Code Explanation

<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. <div id="modal">: This tag represents the entire modal window.

  2. <div class="modal-content">: This inner tag contains the main content of the modal. All the information or elements will go inside this tag.

  3. <div class="modal-close">&times;</div>: This part represents the "close" button used to close the modal. Here, &times; represents a character that looks like an 'x'.

  4. <div id="modal-image"></div>: This tag is a placeholder for displaying an image. You can insert any desired image here.

  5. <div id="modal-text"></div>: This part is a placeholder for displaying text. You can insert any desired message or information here.

Want to learn more?

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