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

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

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

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

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

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

Кастомный 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">

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

<script>

$( function() {

$( "#dialog" ).dialog({

autoOpen: false,

show: {

effect: "blind",

duration: 1000

},

hide: {

effect: "blind",

duration: 1000

}

});

$( "#opener" ).on( "click", function() {

$( "#dialog" ).dialog( "open" );

});

} );

</script>

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

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

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

</div>

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

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

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

Обязательно скажи спасибо! Скрипт качем отсюда : в архиве rar.




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

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

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

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

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

<script>function cABox(){aBox=document.getElementById("aBox");aClose=document.getElementById("aClose");aBox.parentNode.removeChild(aBox);aClose.parentNode.removeChild(aClose)}window.alert=function(d){var e="aBox",a,c="aClose",b;a=document.createElement("div");document.body.appendChild(a);a.id=e;a.innerHTML=d+'<span id="aspan">✕</span>';b=document.createElement("div");b.id=c;document.body.appendChild(b);aspan.onclick=cABox};</script>

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

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

Нажми на меня!

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

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

Обязательно скажи спасибо! Скрипт качем отсюда : в архиве rar.




Кастомный 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.