::backdrop

https://webref.ru/css/backdrop

by fersterin

HTML

<button id="openDialog">Вход на сайт</button> 
  <dialog>
   <form id="authentication" action="handler.php">
    <p><input name="login" required autofocus placeholder="Логин"></p>
    <p><input type="password" name="pass" required placeholder="Пароль"></p>
    <p><button type="submit">Войти</button> 
    <button id="clodeDialog">Закрыть окно</button></p>
   </form> 
  </dialog>
  <script>
   var dialog = document.querySelector('dialog');
   document.querySelector('#openDialog').onclick = function() {
    dialog.showModal();
   }
   document.querySelector('#clodeDialog').onclick = function() {
    dialog.close();
   }
  </script>

CSS

dialog {
    width: 300px;
   }

JavaScript

var dialog = document.querySelector('dialog');
   document.querySelector('#openDialog').onclick = function() {
    dialog.showModal();
   }
   document.querySelector('#clodeDialog').onclick = function() {
    dialog.close();
   }