• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Всплывающие уведомления при клике на CSS (Всплывающие уведомления в темно прозрачном стиле для сайта)
Всплывающие уведомления при клике на CSS
Kosten
Дата: Суббота, 2020-04-04, 17:55 | Сообщение 1
Онлайн
Администраторы
Сообщений:26269
Награды: 61


Давайте рассмотрим отличное решение, которое заключается в уведомление при клике. Где будет выставлена кнопка под функцию и к ней подключим функционал на всплывающие уведомления, которое появится в самом верху в горизонтальном виде, где дизайн будет состоять в темно прозрачной гамме цвета.

Взгляните на эти синхронизированные уведомления для гораздо более простого способа обработки ваших блоков предупреждений. У них нет особых цветов или стилей. Они просто падают на страницу сверху с затемненной непрозрачностью и захватывают экран.

1.



2.



HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

HTML

Код
<div id="success" class="button">Нажмите меня для успеха!</div>
<div id="failure" class="button">Нажмите меня для отказа!</div>

<div class="notify"><span id="notifyType" class=""></span></div>

CSS

Код
.button{  
  float:left;
  width:200px;
  padding:20px 30px;
  margin:30px;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
  transition:background .5s;
}

#success{
  background:#03a679;
  color:#f0f0f0;  
}

#failure{
  background:#ff3939;
  color:#f0f0f0;  
}

.notify{  
  position:absolute;
  top:0px;
  width:100%;
  height:0;  
  box-sizing:border-box;
  color:white;  
  text-align:center;
  background:rgba(0,0,0,.6);
  overflow:hidden;
  box-sizing:border-box;
  transition:height .2s;
}

#notifyType:before{
  display:block;
  margin-top:15px;
  
}

.active{  
  height:50px;
}

.success:before{
  Content:"Аааааааааа! Успех!";
}

.failure:before{
  Content:"О нет! Что-то пошло не так, как планировалось :(";
}

JS

Код
$("#success").click(function () {
  $(".notify").toggleClass("active");
  $("#notifyType").toggleClass("success");
  
  setTimeout(function(){
    $(".notify").removeClass("active");
    $("#notifyType").removeClass("success");
  },2000);
});

$("#failure").click(function () {
  $(".notify").addClass("active");
  $("#notifyType").addClass("failure");
  
  setTimeout(function(){
    $(".notify").removeClass("active");
    $("#notifyType").removeClass("failure");
  },2000);
});

Вы можете создать что-то очень похожее самостоятельно без особых усилий/

Демонстрация
Прикрепления: 3917451.png(4.1 Kb) · 4092610.png(8.9 Kb) · simple-timed-al.zip(3.8 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2020-04-04, 17:58 | Сообщение 2
Онлайн
Администраторы
Сообщений:26269
Награды: 61


Никто не должен создавать любой современный сайт без использования адаптивных методов. Они являются основным продуктом для всех веб-дизайнеров, и каждый используемый вами скрипт также должен быть адаптивным.

К счастью, у этих блоков оповещения есть этот отзывчивый стиль дизайна, и они выглядят великолепно. Вы можете проверить постоянные блоки или непостоянные стили, все из которых выглядят одинаково, а некоторые включают небольшой значок «X», чтобы закрыть его вручную.


See the Pen
Responsive alert box CSS
by Kocsten (@kocsten)
on CodePen.


Прикрепления: notifications.zip(6.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Всплывающие уведомления при клике на CSS (Всплывающие уведомления в темно прозрачном стиле для сайта)
  • Страница 1 из 1
  • 1
Поиск: