Modal Box With Header Display

INFORMATION & CODE

Modal Box With Header Display

What the Code Does

This code creates an interactive webpage component that toggles the visibility of a modal popup box when a button is clicked. It consists of an HTML structure for the button and the modal container, CSS styling to layout and visually theme the components (including a semi-transparent background overlay), and JavaScript to handle the user interaction.

How the Code Works

The mechanism works by utilizing a JavaScript click event listener attached to the trigger button. When the button is pressed, the script toggles a CSS class named .focus on the .overlay element, changing its display property from none to block to reveal the modal. Simultaneously, it checks and swaps the button's text between "OPEN MODAL BOX" and "HIDE MODAL BOX" to accurately reflect the current state of the interface.

How to Use the Code

To use this code, you need to set up a web project with three separate files corresponding to the languages provided: save the HTML snippet as index.html, the CSS as styles.css, and the JavaScript as scripts.js within the same directory. Once your files are linked and loaded in a web browser, clicking the styled "OPEN MODAL BOX" button at the top of the page will display the centered modal window over a dimmed overlay, and clicking it again will hide it.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Modal Box with header</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <button type="button" class="open_modal">OPEN MODAL BOX</button>
    <div class="overlay">
      <div class="modal_box">
        <div class="header">
          <h2>MODAL BOX</h2>
        </div>
        <div class="inner_modal">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .open_modal {
        position: relative;
        left: 50%;
        transform: translatex(-50%);
        padding: 5px 20px;
        background-color: #80a0c0;
        border: 2px solid #6080a0;
        border-radius: 6px;
        color: #bbddff;
        z-index: 1;
      }
      
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 84vh;
        background-color: rgba(64, 96 ,128, 0.8);
      }
      .focus.overlay {
        display: block;
      }
      .active.overlay {
        display: none;
      }
      .modal_box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 20px);
        max-width: 480px;
        min-height: 280px;
        background-color: #b0d0f0;
        border-radius: 10px;
        overflow: hidden;
      }
      .header {
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: #0000a0;
        color: #badafa;
        text-align: center;
      }
      .header h2 {
        margin-top: 10px;
      }
      .inner_modal {
        position: absolute;
        top: 60px;
        left: 20px;
        padding-bottom: 20px;
        width: calc(100% - 40px);
        min-height: 100px;
        color: #507090;
        font-size: 18px;
        font-weight: 500;
        text-align: justify;
      }

JAVASCRIPT


                const modal = document.querySelector(".open_modal");
const overlay = document.querySelector(".overlay");
      
modal.onclick = function() {
  overlay.classList.toggle("focus");
  if (modal.innerHTML === "HIDE MODAL BOX") {
    modal.innerHTML = "OPEN MODAL BOX";
  }else{
    modal.innerHTML = "HIDE MODAL BOX";
  }
}

MENU

INFORMATION & CODE