Как стилизовать alert, confirm и prompt?

Question

[pvshvb]

Возможно ли как-то стилизовать эти окна?
И если нельзя, буду очень благодарен, если кто-то покажет как их сделать самому (особенно confirm)

Спасибо заранее

Answer 1

[imko]

Никак

Comments

[imko]

Почитай https://developer.mozilla.org/ru/docs/Web/HTML/Ele... , может быть он подойдет для твоих задач, поддержка 94%, можно использовать если не требуется поддержка инвалидных яблок

[pvshvb]

imko, именно они мне и нужны :)

[pvshvb]

imko, но там вроде написано что поддерживается)

[imko]

pvshvb, ну самые свежие - да, а реально у нас довольно много юзеров с неактуальными версиями ходит. Еще имей в виду что одна и та же версия сафари может по разному равботать на разных версиях ОСи

[pvshvb]

imko, к счастью только для себя делаю)

[imko]

pvshvb, ну тогда пользуйся если у тебя заработает) довольно удобная вещь, интеграция с формами полезная. Хотя если задача просто скрывать/показывать какое то окно то разницы с самописным модалом из div`ов не будет особо

[Сергей delphinpro]

pvshvb, практически везде работает на сегодняшний день https://caniuse.com/dialog

Answer 2

[Noder SS]

Можно через плагины, а зачем вам?

Comments

[pvshvb]

Чтобы сделать их красивыми и под общий стиль:)

[Noder SS]

pvshvb, вручную вы его под сайт никак не стилизуете. Только выбрать можете

Answer 3

[toster23]

сделай свой аналог этих функций
нет ничего проще

кладешь поверх всего полупрозрачный див
внутри него окно с кнопками и тестом...

Comments

[pvshvb]

А как приостанавливать выполнение всего остального кода когда например алерт показан?

[toster23]

самый простой способ - поверх всего див - тогда пользователь не сможет на кнопки нажимать
и если если события для кнопок клавиатуры - то их временно отключаешь

Answer 4

[Teleweb developer]

function alert(text) {
   let divAlert = document.createElement("div");
   divAlert.className = "my_alert";
   divAlert.innerHTML = `Потдвердите действие:<br>${text}<br><button id="yes">OK</button>`;
   document.body.appendChild(divAlert);
   document.querySelector("#yes").onclick = () => {
      divAlert.remove();
   }
}
alert("hello");

Это только пример на функции alert()

А ещё можно переназначить её:

alert = (...args) => {
   console.log(...args[0]);
}