<p>⚠️<i> This demo only works in Chrome</i></p>
<button id="openModal">Open Modal</button> <span id="enteredEmail"></span>
<dialog id="modal">
  <form method="dialog">
    <h2>💌 Sign up to our newsletter!</h2>
    <input type="email" id="email" placeholder="Enter your email" required/>
    <button type="submit" value="yes">Sign up!</button>
    <button type="submit" value="no" formnovalidate>No, thanks.</button>
  </form>
</dialog>
const openModalButton = document.querySelector('#openModal')
const modal = document.querySelector('#modal')
const emailInput = modal.querySelector('#email')
const enteredEmail = document.querySelector('#enteredEmail')

function openModal() {
  modal.showModal()
}

function logInput(userAnswer) {
  console.log(typeof userAnswer)
  if(userAnswer === 'yes') {
      enteredEmail.textContent = 'Entered email:' + emailInput.value
  } else {
    enteredEmail.textContent = 'Not interested in the newsletter'
  }
  emailInput.value = ''
  modal.returnValue = ''
}

openModalButton.addEventListener('click', openModal)

modal.addEventListener('close', () => logInput(modal.returnValue))

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.