CDK Entest

Introduction#

This demo shows how to create a simple modal using tailwind
fixed position
background opacity
button to control modal.style.display
Let create a simple modal
<!DOCTYPE html>
<html class="dark">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../dist/output.css" />
  </head>
  <body>
    <div class="dark:bg-slate-800 min-h-screen">
      <div class="mx-auto max-w-4xl min-h-screen dark:bg-slate-800">
        <button
          class="
                bg-orange-500 
                px-10 
                py-3 
                rounded-sm"
          id="toggle"
        >
          Modal
        </button>
        <p class="dark:text-white">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam
          itaque dignissimos repudiandae, officiis cupiditate reprehenderit
          explicabo deleniti aliquam nihil voluptatum blanditiis odio eum dolore
          voluptates unde iusto nesciunt dicta. Beatae! Lorem ipsum, dolor sit
        </p>
      </div>
      <div
        class="
            fixed 
            top-0 
            bottom-0 
            left-0 
            right-0 
            bg-slate-300 
            bg-opacity-50 
            hidden"
        id="modal"
      >
        <div class="mx-auto max-w-4xl dark:bg-white p-32">
          <button class="bg-orange-400 px-10 py-3 rounded-sm" id="close">
            Close
          </button>
        </div>
      </div>
    </div>
    <script>
      let toggle = document.getElementById('toggle')
      let close = document.getElementById('close')
      let modal = document.getElementById('modal')

      toggle.addEventListener('click', () => {
        modal.style.display = 'block'
      })
      close.addEventListener('click', () => {
        modal.style.display = 'none'
      })
    </script>
  </body>
</html>
Simple Modal#
