<header>
  <h2 class="title">HTML Event: show</h2>
  <p class="description">Подія спрацьовує при відкритті діалогового вікна</p>
</header>
<main>
  <div class="result">
    <button id="openDialogButton">Відкрити діалогове вікно</button>

    <!-- Діалогове вікно -->
    <dialog id="myDialog">
      <p id="dialogContent">Тут буде динамічний контент.</p>
      <button id="closeDialogButton">Закрити</button>
    </dialog>

    <!-- Повідомлення про час відкриття -->
    <p id="timeOpened">Діалогове вікно ще не відкрито.</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin-top: 15px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

const openDialogButton = document.getElementById('openDialogButton');
const closeDialogButton = document.getElementById('closeDialogButton');
const dialog = document.getElementById('myDialog');
const dialogContent = document.getElementById('dialogContent');
const timeOpened = document.getElementById('timeOpened');

// Додаємо обробник події для відкриття діалогу
openDialogButton.addEventListener('click', () => {
  dialog.showModal();
});

// Додаємо обробник події для закриття діалогу
closeDialogButton.addEventListener('click', () => {
  dialog.close();
});

// Подія 'show' для завантаження динамічного контенту і показу часу
dialog.addEventListener('show', () => {
  // Встановлюємо динамічний контент у діалог
  dialogContent.textContent = 'Контент завантажено динамічно!';
  
  // Показуємо поточний час відкриття
  const currentTime = new Date().toLocaleTimeString();
  timeOpened.textContent = `Діалогове вікно відкрите о ${currentTime}`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.