<dialog>
 <!-- содержимое-->
 <button id="closeBtn">Закрой меня</button>
</dialog>
<button id="openBtn">Открыть модалку</button>

dialog {
  width: 300px;
  animation: move-in 0.3s;
  /* другие стили */
}
dialog::backdrop {
  background-color: #2e3252b3;
  animation: fade-in 0.3s;
}

const dialog = document.querySelector('dialog');
const openBtn = document.querySelector('#openBtn');
const closeBtn = document.querySelector('#closeBtn');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());

console.log(myVar); // Output: ReferenceError: Cannot access 'myVar' before initialization

let myVar = 42;

console.log(myVar); // Output: undefined

var myVar = 42;

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetales">
    <option value="carrot">Carrot</option>
    <option value="potato" disabled>Potato</option>
  </optgroup>
</select>