ModAlert (Front-End) - замена стандартным alert сообщениям

Простые и симпатичные окошки уведомлений в замен стандартным alert сообщениям.

Сообщения отображаются в правом верхнем углу:

По умолчанию прописаны 4 основных статуса:

success - Успешно
info - Информация
warning - Внимание!
error - Ошибка

Количество статусов не ограничено, можно добавить свои и оформить их в файле стилей как душе угодно.

Пример вызова окна:

ModAlert.addAlert({
	type: 'success',
	title: 'Свой заголовок',
	text: 'Текст сообщения в блоке',
});

Перечень параметров:

type: '',        //тип блока, по умолчанию в стилях прописаны: success, info, warning и error
title: '',       //заголовок. Если заголовок не указан, но указан тип, заголовок будет взят от типа
text: '',        //текст сообщения
timeout: 3000,   //время показа блока
autohide: true,  //автоматически скрывать блок по истечению времени
showicon: true,  //показывать иконку
showtitle: true,  //показывать заголовок

Более подробно с функционалом можно ознакомиться на демо странице. Там же встроен конструктор-генератор.
Демо: https://sandev.pro/demo/ModAlert.php

Исходники можно скачать на GitHub

С уважением,
Олег Александрович a.k.a. Sander

Комментарии: (21)

SKYNET74 Посетитель 15 мая 2018 04:02 #
Было бы не плохо написать современный аналог гриттера, позволяющий задавать для каждого окна свои правила появления, анимацию, место появления, таймаут показа, и функции обработчиков перед созданием элемента, после открытия, перед закрытием, после удаления элемента.
0

Ответить Цитировать
1. Sander Администратор 15 мая 2018 13:54 #
  
  Переписал код.
  Сделал его использование более гибким.
  Для начала считаю этого пока достаточно. Будет настроение, может и продолжу.
  
  0
  
  Ответить Цитировать
404 Гость 23 мая 2018 23:23 #
А будет реализация для DLE?
0

Ответить Цитировать
1. Sander Администратор 24 мая 2018 09:39 #
  
  Открыть engine/classes/js/dle_js.js
  Найти код:
  function DLEalert(a,c){
  
  Заменить на:
  function DLEalert(a,c){return ModAlert.addAlert({type:'info',title:c,text:a});
  
  0
  
  Ответить Цитировать
404 Гость 24 мая 2018 17:20 #
А можно пожалуйста более подробную инструкцию?
Или сделать замену, как вы указали и создать просто стиль для info - он будет сам по себе исчезать?
0

Ответить Цитировать
1. Sander Администратор 24 мая 2018 18:40 #
  
  Подключить JS и CSS из исходников и выполнить замену указанную выше.
  
  0
  
  Ответить Цитировать
404 Гость 24 мая 2018 21:27 #
К сожалению не работает(
0

Ответить Цитировать
1. Sander Администратор 24 мая 2018 22:52 #
  
  Работает. Проверял на dle 13.0
  
  0
  
  Ответить Цитировать
empare Клиент 8 июня 2018 08:52 #
Спасибо за мод!

А можно как-то реализовать чтобы разные окна всплывали, если ошибка то ошибка, если успех то успех. Я про это имею ввиду function DLEalert(a,c){return ModAlert.addAlert({type:'info',title:c,text:a});
0

Ответить Цитировать
1. Sander Администратор 8 июня 2018 12:03 #
  
  Без множественных правок - никак.
  DLE сообщает только 2 параметра в функцию:
  1. Заголовок, который в 99% случаев "Информация"
  2. Текст сообщения/ошибки.
  
  Нигде не сообщается о типе и нет возможности это определить.
  
  0
  
  Ответить Цитировать
Виталий Гость 28 ноября 2018 16:09 #
А как-то возможно сделать чтобы окно открывалось через заданное время?
0

Ответить Цитировать
1. Sander Администратор 28 ноября 2018 18:55 #
  
  Сделайте задержку перед вызовом метода. Но зачем?
  В самом модуле нет и я вообще не вижу необходимости в подобном функционале.
  
  0
  
  Ответить Цитировать
  1. SKYNET74 Посетитель 24 декабря 2018 22:46 #
    
    Аналог окошек от ExtJS бы ;)
    
    0
    
    Ответить Цитировать
amnistik Посетитель 3 июня 2019 14:35 #
подскажите а вообще возможно (ModAlert (Front-End) - замена стандартным alert сообщениям) заменить это https://prnt.sc/nwz7wc стандартные сообщения о добавлении ли-бо удалении в/из закладок?
0

Ответить Цитировать
1. Sander Администратор 3 июня 2019 14:38 #
  
  Да, вполне.
  Нужно только чуточку разбираться в синтаксисе JS.
  Файл engine/classes/js/dle_js.js
  
  0
  
  Ответить Цитировать
  1. amnistik Посетитель 3 июня 2019 14:47 #
    
    К большому сожалению в JS вообще 0, Могу ли я как то вас убедить (не бесплатно) помочь мне с этим вопросом? Был бы очень признателен!
    
    +1
    
    Ответить Цитировать
midarovrk VIP 12 декабря 2019 22:26 #
А можно сделать чтобы всплывало снизу справа а не сверху справа?
Или придётся кардинально переписывать код?
0

Ответить Цитировать
1. Sander Администратор 12 декабря 2019 22:28 #
  
  Можно, все в стилях.
  Заменить top: 0; на bottom: 0;
  Возможно этого будет достаточно.
  
  0
  
  Ответить Цитировать
2. midarovrk VIP 12 декабря 2019 23:15 #
  
  А всё, всего-то в css поменять top на bottom :)
  
  0
  
  Ответить Цитировать
Tealk Гость 17 октября 2020 12:00 #
Sorry for this stupid question but , where you make an alert message on admincp ?? I see nothing on the admin panel for making one ... Thanks.
0

Ответить Цитировать
Василь Гость 5 января 2024 01:17 #
Вже є кращий як на мене

https://webrambo.ru/220-zamena-okoshka-dlealert-na-tost-toast.html
0

Ответить Цитировать