modal dialog

body {
    margin: 0;
    min-height: 200vh;      /* force scrolling */
}

header {
    background-color: #f57352;
}

.header-body {
    padding: 1em 0;
    margin: 0 auto;
    width: 80%;
}

/* modal dialog */
.modal {

    display: none;              /* ⭐️ hide initially */

    position: fixed;            /* ⭐️ fixed */
    inset: 0;                   /* ⭐️ obscure entire <body> */

    /* ⭐️ semi-transparent */
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-body {

    position: fixed;            /* ⭐️ fixed */
    inset: 3em 20%;
    width: 180px;               /* ⭐️ override `right` */

    padding: 2em;
    background-color: #eee;

    overflow: auto;             /* ⭐️ scrollable */
}

/* buttons */
button {
    background-color: black;
    color: white;
    padding: .4em 1em;
    border-radius: 6px;
}

button:hover {
    background-color: #666;
}

let modal = $('#modal');

// sign up button 
$('#btnSign').onclick = function(e){
    e.preventDefault();
    modal.style.display = 'block';
}

// close modal button
$('#btnClose').onclick = function(e){
    e.preventDefault();
    modal.style.display = 'none';
}

// $ ⭐️ selector helper
function $(selector, parent = document){
  return parent.querySelector(selector);
}

<!-- header -->
<header>
  <div class="header-body">
    <p>
      Sign up for our newsletter 👉🏻

      <button id="btnSign">Sign up</button>
    </p>
  </div>
</header>

<!-- modal -->
<div class="modal" id="modal">
  <div class="modal-body">
    <button id="btnClose">Close</button>
    <h2>Newsletter</h2>
    <p>Sign up for our monthly newsletter.</p>

    <form>
      <p>
        <label for="email">Email address:</label>
        <input type="text" name="email" />
      </p>

      <p><button type="submit">Submit</button></p>
    </form>
  </div>
</div>

Previousundefined tag Nextnav bar

Last updated 3 years ago