Содержание страницы
домикГлавная / Скрипты java и php / Как изменить javascript alert
алерт сообщениеЗдесь я покажу, как можно изменить и сделать более красивее системное сообщение jаvascript alert, и самое главное, в Алерт можно внедрять любой код: ссылки, картинки и видео. Мы рассмотрим 12 сообщений Алерт различных по своему виду и анимации.

В моих примерах мы же изменим внешний вид jаvascript alert с помощью дополнения стилевых значений и применения ява скрипт, и сообщение "Алерт" у нас примет уже не стандартный вид, как он идёт изначально, а тот, какой мы захотим сами, и оно будет выводиться без проблем во всех основных браузерах.

12 примеров сообщений jаvascript alert

Представленные примеры сообщений Алерт легко редактируются на ваше усмотрение: цвет и фон затемняющего основного окна, размеры, фон сообщения, цвет, рамка и тень, цвет и размер текста. В таких системных сообщениях можно выводить любую информацию.

Как изменить jаvascript alert

В скачанном архиве лежат 2 файла: стилевой (css) и java скрипт (js), их и нужно залить на хостинг к себе на сайт.

Файл index.html служит примером всех анимационных эффектов для сообщений Алерт.
Открыв его через браузер, вы наглядно всё увидите сами, а открыв его текстовым редактором, вы можете скопировать код любого сообщения и вставить на свою страницу, не забыв прописать пути для подключения скриптов и стилевого файла, как это сделано index.html

Разберём параметры скрипта.


<script type="text/jаvascript">
  $('.demo-1').on('click',function(){$.alert({
    title: 'Attention!',
    animation: 'scale',
    content: 'Alert System message with propisaniem links, images and videos.',
    theme: 'may'
  });});
</script>

Описание значений

  • $('.demo-1') - здесь в кавычках прописывается класс, который обрабатывается скриптом и запускает окно;
  • title - это заголовок сообщения Алерт;
  • animation - эффект анимации;
  • content - текстовая область сообщения Алерт;
  • theme - здесь указываете свой класс для стилевого оформления системного сообщения Алерт. То есть, если вы прописали, как в данном случае класс may, то вам нужно добавить этот же класс и в файл css, и прописать для него стилевые параметры для оформления своего окна Алерт. Если данный параметр оставить пустым, либо сделать в нём ошибку, то ваше сообщение Алерт будет оформлено по стандартному значению.
Для того, чтобы вызвать jаvascript alert на странице, пропишите в любом месте этот код:
htmlCOPY
<p><a class="demo-1">Эффект появления</a></p>
На этом всё, оставляем комментарии, нажимаем на Лайки, и спрашиваем, что не понятно!

стрелка вниз Скачать jаvascript alert ( Алерт )

Ссылка на файл: скачать архив
Дата публикации: 16.08.2018
Комментарии
Светлана
20 мая 2019 10:01
Светлана
Здравствуйте, те два файла нужно забросить в корень сайта и что вставлять нужно для Алерт сообщений в страницы сайта подскажите и где прописывать пути к скриптам.
Не поняла эти моменты
Admin
20 мая 2019 10:39
Admin
Светлана, здравствуйте!
В файле index.html всё же прописано: и пути к скриптам и сам код для сообщений Алерт. Откройте этот файл в текстовом редакторе и увидите всё сами.
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!