Modal window using <dialog> HTMLElement

with cubic-bezier function

by Konstantin Rouda

HTML

<div class="c-btn-container">
  <button class="c-btn" id="openBtn">Open Dialog</button>
</div>


<dialog class="o-dialog" id="dialog" open>
  <button class="o-dialog__btn o-dialog__btn--close" id="closeBtn" aria-label="close">X</button>
  <section class="o-dialog__container">
    <article class="o-dialog__content">
      some text
    </article>
    <footer class="o-dialog__footer">
      
    </footer>
  </section>
</dialog>

CSS

HTML {
  /*using system font-stack*/
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
  /*font-size: 115%;*/ /*~18px*/
  /*font-size: 100%;*/ /*~16px*/
  font-size: calc(16px + (20 - 16) * (100vw - 300px) / (1100 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
/*   zoom: 5; */
}

BODY {
  height: 720px;
  margin: 0;
  padding-bottom: 2rem;
  color: rgb(58, 61, 64);
  background-color: rgb(254, 254, 254);
/*   background-color: rgb(41, 45, 48); */
/*   zoom: 5; */
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}


/*Actual Style*/
/*==================================
        CONTAINER
====================================*/
.c-btn-container {
  
}

.c-btn {
  
}


.o-dialog {
  width: min(70vw, 750px);
  height: min(50vh, 500px);
  border-radius: 0.15rem;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .17);
  transform: translateX(200%);
  transition: transform 1.8s cubic-bezier(0, 1, 1, 0);
}

.o-dialog.is-opened {
  transform: translateX(-200%);
}

.o-dialog::backdrop {
  background: rgba(90, 0, 0, 0.1);
}


.o-dialog__btn {
  
}

.o-dialog__btn--close {
  
}


.o-dialog__container {
  
}


.o-dialog__content {
  
}

.o-dialog__footer {
  
}

JavaScript

;(function () {
  "use strict";
  
  const openBtn = document.getElementById("openBtn");
  const dialog = document.getElementById("dialog");
  const closeBtn = document.getElementById("closeBtn");
  
  openBtn.addEventListener("click", onOpenBtnClick);
  closeBtn.addEventListener("click", onCloseBtnClick);
  
  
  function onOpenBtnClick (e) {
    ///dialog.showModal();
    dialog.classList.toggle("is-opened");
  }
  
  function onCloseBtnClick (e) {
    dialog.close();
  }
  
  
  
  
})();