Заменить алерт на кастомный(самодельный)

Как заменить "стандартный alert" на кастомный. Сколько вариантов существует по замене стандартного алерта в js? С примерами и скачать готовый код кастомного алерта! Одно из самых неудобных вещей в стандартном alert в том, что туда нельзя поместить... например ссылку... либо кнопку...

Замена стандартного алерта на кастомный.

1. Кастомный alert с jquery.
Пример кастомного alert.
Скачать код кастомного alert.

2. Замена alert на кастомный вывод(чистый js).
Пример кастомного alert чистый js.
Скачать код кастомного alert.

3. Кастомный alert с jquery №2.
Пример кастомного alert.
Скачать код кастомного alert.

1. Кастомный alert с jquery

Начнем с "Кастомного alert с jquery".

Для того, чтобы собрать кастомный alert с использованием jquery вам понадобится:

Подключаем внешний скрипт jquery:

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

Дополнительная библиотека , которую также нужно подключить -jQuery UI.

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

Далее вам потребуются оформить кастомный алерт... и опять же стили от jquery:

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

Далее немного кода, который и будет вызывать кастомный алерт:

Качаем отсюда : в архиве rar.

И далее вам понадобится html, кнопкой вызова кастомного алерта:

<div id="dialog" title="Здесь заголовок">

<p>Здесь можно поместить даже <a href=https://jsphp.ru/ target=_blank>ссылку</a></p>

</div>

<button id="opener">Open Dialog</button>

Соберем весь код в одно целое - это будет у нас пример кастомного алерта в jquery.

Скачать код кастомного alert.

Скрипт качаем отсюда : в архиве rar.

2. Замена alert на кастомный вывод(чистый js).

Давайте соберем такой же пример кастомного "alert"? только на чистом js(javascript).

Для этого вам понадобится:

Поскольку на чистом javascript ничего подключать не нужно, то и это замечательно!

Вам потребуется функция, которая и будет вызывать и создавать кастомный, специально сжал код, чтобы он не был таким длинным...

Качаем отсюда : в архиве rar.

Css стили будут занимать много места...

И кнопка с кастомным алертом:

Соберем весь код кастомной кнопки на чистом javascript и поместим его на отдельную страницу: живой пример кастомного alert.

Скачать код кастомного alert на чистом js.

Скрипт качаем отсюда : в архиве rar.

3. Кастомный alert с jquery №2.

Решил привести второй вариант самодельного "alert" с некоторыми изменениями первого варианта.

Чем отличаются два вариант кастомного alert?

В первом вариант... чересчур много подключений к внешним скриптам! Сделаем кастомный alert с единственным подключением библиотеки jquery. Для этого вам понадобится..

Подключаем как и в первом варианте с "jquery":

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

Далее функция, которая будет обрабатывать ваше нажатие на ссылку, input, либо на любой блок... она слишком большая поэтому не буду её сюда помещать!

Аналогично со стилями...

Далее самое интересное - кнопка и текст для вывода кастомного "alert":

Соберем весь код и поместим его на страницу примера.

Скачать код кастомного alert на одном подключении jquery.

Скрипт качаем отсюда : в архиве rar.

Всего комментариев : Comments+ 2.0

+ =