yuriy5022
Умник
Нечего было делать, сделал систему оповещений. Их можно использовать например для оповещения при авторизации (Успешно вошли или Произошла ошибка).
Требуеться подключенная библиотека Jquery!
Создаем папку js.
В папке создаем файл notifications.js.
Открываем этот файл и вставляем в него содержимое:
После исчезновения оповещения (opacity) блок с оповещением уничтожаеться
Автор: yuriy5022
Требуеться подключенная библиотека Jquery!
PHP:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>В папке создаем файл notifications.js.
Открываем этот файл и вставляем в него содержимое:
PHP:
var GlobalInfo = {id: 0}
function CreateMessage(info)
{
if(GlobalInfo.id >= 5) return console.error("More five message for page.");
GlobalInfo.id++;
switch(info.type)
{
case 1:
{
$('#message-items').append('<li class="message message-default" id="message_box'+ GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'+ info.name +'</b><p>'+ info.text +'</p></li>');
break;
}
case 2:
{
$('#message-items').append('<li class="message message-success" id="message_box'+ GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'+ info.name +'</b><p>'+ info.text +'</p></li>');
break;
}
case 3:
{
$('#message-items').append('<li class="message message-error" id="message_box'+ GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'+ info.name +'</b><p>'+ info.text +'</p></li>');
break;
}
case 4:
{
$('#message-items').append('<li class="message message-warning" id="message_box'+ GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'+ info.name +'</b><p>'+ info.text +'</p></li>');
break;
}
}
if(info.time != -1) setTimeout(function(){ MessageRemove(GlobalInfo.id) }, info.time*1000);
}
function MessageRemove(id)
{
$('#message_box'+ id).fadeOut(1000);
setTimeout(function(){ $('#message_box'+ id).remove() }, 1000);
GlobalInfo.id--;
return true;
}
PHP:
.message
{
position: realtive;
display: block;
left: 0;
right: 20px;
width: 300px;
z-index: 9999;
padding: 15px;
margin: 10px;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
}
.message-default
{
background: rgba(39,44,49,0.7);
}
.message-success
{
background: rgba(0, 255, 0, 0.7);
}
.message-error
{
background: rgba(255, 0, 0, 0.7);
}
.message-warning
{
background: rgba(255, 234, 0, 0.7);
}
#message-items
{
float:left;
position: absolute;
display: inline-block;
left: 0;
bottom: 15px;
}
.close
{
float: right;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
PHP:
.message
{
position: realtive;
display: block;
left: 0;
right: 20px;
width: 300px;
z-index: 9999;
padding: 15px;
margin: 10px;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
}
.message-default
{
background: rgba(39,44,49,0.7);
}
.message-success
{
background: rgba(0, 255, 0, 0.7);
}
.message-error
{
background: rgba(255, 0, 0, 0.7);
}
.message-warning
{
background: rgba(255, 234, 0, 0.7);
}
#message-items
{
float:right;
position: absolute;
display: inline-block;
right: 0;
}
.close
{
float: right;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
PHP:
<div id="message-items"></div>Вызов функции:
CreateMessage({ name:'Приветствуем вас!', text:'Вы зашли на сайт', time: -1, type: 1});
Параметры:
name - заголовок оповещения
text - текс оповещения
time - Время до исчезновения в секундах.Без исчезновения -1.
type - Тип оповещения:
1 - Стандартный.
2 - Успешно.
3 - Ошибка.
4 - Предупреждение.
CreateMessage({ name:'Приветствуем вас!', text:'Вы зашли на сайт', time: -1, type: 1});
Параметры:
name - заголовок оповещения
text - текс оповещения
time - Время до исчезновения в секундах.Без исчезновения -1.
type - Тип оповещения:
1 - Стандартный.
2 - Успешно.
3 - Ошибка.
4 - Предупреждение.
Перед </body>
PHP:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/js/notifications.js"></script>
<script>
CreateMessage({ name:'Приветствуем вас!', text:'Вы зашли на сайт.', time: 1, type: 1});
CreateMessage({ name:'Успех!', text:'Операция прошла успешно.', time: 2, type: 2});
CreateMessage({ name:'Ошибка!', text:'Произошла ошибка.', time: 3, type: 3});
CreateMessage({ name:'Предупреждение', text:'Может произойти ошибка.', time: 4, type: 4});
</script>После исчезновения оповещения (opacity) блок с оповещением уничтожаеться
Автор: yuriy5022
Последнее редактирование модератором: