Давайте рассмотрим отличное решение, которое заключается в уведомление при клике. Где будет выставлена кнопка под функцию и к ней подключим функционал на всплывающие уведомления, которое появится в самом верху в горизонтальном виде, где дизайн будет состоять в темно прозрачной гамме цвета.
Взгляните на эти синхронизированные уведомления для гораздо более простого способа обработки ваших блоков предупреждений. У них нет особых цветов или стилей. Они просто падают на страницу сверху с затемненной непрозрачностью и захватывают экран.
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);
});
Вы можете создать что-то очень похожее самостоятельно без особых усилий/
Демонстрация
