JS властивість Event.show

Загальний опис

Подія show спрацьовує, коли елемент <dialog> стає видимим для користувача. Ця подія відбувається після виклику методів show() або showModal(), які використовуються для відображення діалогових вікон на веб-сторінці. Подія корисна, якщо потрібно виконати певні дії одразу після відкриття діалогового вікна, наприклад, завантаження динамічних даних, активація інтерактивних елементів або зміна стану інтерфейсу користувача.

Елемент <dialog> спочатку був представлений як частина HTML5 і дозволяє створювати вбудовані діалогові вікна з можливістю виклику методом showModal() для модальних вікон (які блокують взаємодію з іншими елементами) або методом show() для звичайних вікон. Коли діалогове вікно стає видимим, автоматично спрацьовує подія show, яка дозволяє розробникам реагувати на цей момент.

Приклад:

const dialog = document.querySelector('dialog');

dialog.addEventListener('show', function() {
  console.log('Діалогове вікно відкрито');
});

dialog.showModal();

У цьому прикладі, коли метод showModal() викликається для відображення діалогового вікна, подія show спрацьовує і виводить повідомлення в консоль. Це дозволяє розробникам додавати будь-які додаткові дії або анімації після відкриття вікна.

Подія show спрацьовує кожного разу, коли вікно стає видимим, незалежно від того, чи використовується show() або showModal(). Розробники можуть використовувати цю подію для контролю стану додатку або зміни візуальних елементів інтерфейсу залежно від того, коли вікно стає активним. Це корисно у випадках, коли потрібно, щоб діалогове вікно було інтерактивним і відображало динамічний контент або користувацькі дані, що змінюються.

правити

Порада

Подія show спрацьовує лише для елементів <dialog>. Якщо ви використовуєте інші способи відображення діалогових вікон (наприклад, через модифікацію стилів), подія не спрацює. У таких випадках краще вручну контролювати появу модальних вікон за допомогою подій click або focus.

автор: Bond правити

Порада

Для перевірки, чи вікно вже відкрите, використовуйте властивість open у елемента <dialog>. Це дозволяє уникнути повторного відкриття або запуску подій, коли вікно вже активне.

автор: Bond правити

Порада

Використовуйте метод showModal() для створення модальних вікон, які блокують взаємодію з іншими частинами сторінки, поки користувач не завершить взаємодію з діалогом. show дозволяє додавати анімації або інші події, пов'язані з відкриттям вікна.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('show', function(event) {
  // код обробки події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	20	22	7	23	14	—

Підтримка: мобільні переглядачі

Переглядач
	—	42	22	—

Приклади

+ запропонувати свій приклад у пісочниці

<dialog>демо</dialog>

const dialog = document.querySelector('dialog');
const contentArea = document.querySelector('#dialogContent');

dialog.addEventListener('show', function() {
  // Динамічно завантажуємо контент у діалогове вікно
  fetch('/api/getDialogContent')
    .then(response => response.text())
    .then(data => {
      contentArea.innerHTML = data;
    });
});

dialog.showModal();

<dialog id="dlg">
    <p>Діалогове вікно</p>
    <button onclick="this.closest('dialog').close()">Закрити</button>
</dialog>
<button id="openBtn">Відкрити діалог</button>

// Події show не існує: про відкриття dialog повідомляє нова подія toggle
const dialog = document.getElementById('dlg');

dialog.addEventListener('toggle', () => {
    console.log('Діалог тепер', dialog.open ? 'відкритий' : 'закритий');
});

document.getElementById('openBtn').addEventListener('click', () => {
    dialog.showModal();
});