заменить алерт на кастомный(самодельный)
Как заменить "стандартный alert" на кастомный. Сколько вариантов существует по замене стандартного алерта в js? С примерами и скачать готовый код кастомного алерта! Одно из самых неудобных вещей в стандартном alert в том, что туда нельзя поместить... например ссылку... либо кнопку...
Замена стандартного алерта на кастомный.
- Кастомный alert с jquery. Пример кастомного alert.
- Замена alert на кастомный вывод(чистый js). Пример кастомного alert чистый js.
- Кастомный alert с jquery №2. Пример кастомного alert.
Скачать код кастомного alert.
Скачать код кастомного alert.
Скачать код кастомного alert.
Кастомный alert с jquery
Начнем с "Кастомного alert с jquery".
Для того, чтобы собрать кастомный alert с использованием jquery вам понадобится:
Подключаем внешний скрипт jquery:
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<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://jsphp.ru/ target=_blank>ссылку</a></p>
</div>
<button id="opener">Open Dialog</button>
Соберем весь код в одно целое - это будет у нас пример кастомного алерта в jquery.
Скачать код кастомного alert.
С тебя чашка кофе и забирай код готового кастомного алерта в сборе, в архиве zip.
Замена alert на кастомный вывод(чистый js).
Давайте соберем такой же пример кастомного "alert"? только на чистом js(javascript).
Для этого вам понадобится:
Поскольку на чистом 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.appendChilda;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 стили будут занимать много места...
И кнопка с кастомным алертом:
<button onclick="alert('<h2>Привет мир!</h2>Здесь может быть текст и даже <a href=https://jsphp.ru/ target=_blank>ссылка</a> <div class=\'abut\' onclick=\'cABox(); return false\'>Закрыть</div> ')">Нажми на меня!</button>
Соберем весь код кастомной кнопки на чистом javascript и поместим его на отдельную страницу: живой пример кастомного alert/
Скачать код кастомного alert на чистом js.
С тебя чашка кофе и забирай код готового кастомного алерта в сборе, в архиве zip.
Кастомный alert с jquery №2.
Решил привести второй вариант самодельного "alert" с некоторыми изменениями первого варианта.
Чем отличаются два вариант кастомного alert?
В первом вариант... чересчур много подключений к внешним скриптам! Сделаем кастомный alert с единственным подключением библиотеки jquery. Для этого вам понадобится..
Подключаем как и в первом варианте с "jquery":
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
Далее функция, которая будет обрабатывать ваше нажатие на ссылку, input, либо на любой блок... она слишком большая поэтому не буду её сюда помещать!
Аналогично со стилями...
Далее самое интересное - кнопка и текст для вывода кастомного "alert"^
<div onclick="alert('<div class=\'alertm_h1\'>Заголовок alert</div><div class=\'alertm_text\'>Текст внутри alert() - допускается использовать html (даже input поля формы) и <a href=\'https://jsphp.ru/\'>ссылки</a></div>',''); return false;">Показать сообщение</div>
Соберем весь код и поместим его на страницу примера.
Скачать код кастомного alert на одном подключении jquery.
С тебя чашка кофе и забирай код готового кастомного алерта в сборе, в архиве zip.
