Jquery Notification Popup Design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML VS CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<STyle>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
overflow: hidden;
}
button {
padding: 8px 16px;
font-size: 25px;
font-weight: 500;
border-radius: 4px;
border: none;
outline: none;
background: #187900;
color: white;
letter-spacing: 1px;
cursor: pointer;
}
.alert {
background: #ffdb9b;
padding: 20px 40px;
min-width: 420px;
position: absolute;
right: 0;
top: 10px;
border-radius: 7px;
border-left: 8px solid #ffa502;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.alert.showAlert {
opacity: 1;
pointer-events: auto;
}
.alert.show {
animation: show_slide 1s ease forwards;
}
@keyframes show_slide {
0% {
transform: translateX(100%);
}
40% {
transform: translateX(-10%);
}
80% {
transform: translateX(0%);
}
100% {
transform: translateX(-10px);
}
}
.alert.hide {
animation: hide_slide 1s ease forwards;
}
@keyframes hide_slide {
0% {
transform: translateX(-10px);
}
40% {
transform: translateX(0%);
}
80% {
transform: translateX(-10%);
}
100% {
transform: translateX(100%);
}
}
.alert .fa-exclamation-circle {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #ce8500;
font-size: 30px;
}
.alert .msg {
padding: 0 20px;
font-size: 18px;
color: #ce8500;
}
.alert .close-btn {
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
background: #ffd080;
padding: 20px 18px;
cursor: pointer;
}
.alert .close-btn:hover {
background: #ffc766;
}
.alert .close-btn .fas {
color: #ce8500;
font-size: 22px;
line-height: 40px;
}
</STyle>
</head>
<body>
<button>Login</button>
<div class="alert hide">
<span class="fa fa-exclamation-circle"></span>
<span class="msg">Warning: This is a warning alert!</span>
<div class="close-btn">
<span class="fa fa-times"></span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('button').click(function () {
$('.alert').addClass("show");
$('.alert').removeClass("hide");
$('.alert').addClass("showAlert");
setTimeout(function () {
$('.alert').removeClass("show");
$('.alert').addClass("hide");
}, 5000);
});
$('.close-btn').click(function () {
$('.alert').removeClass("show");
$('.alert').addClass("hide");
});
</script>
</body>
</html>
How To Use This Cord
steps
- Fast One Copy Html File.
- Copy CSS File And Past Head Part Top Fo Html File.
- File Save Name.html
- Ran Html File
- Ready To Use
Solve This Problem
- Toast Notification Jquery
- Toast Notification
- Jquery Toast Message Jsfiddle
- Jquery Toast Codepen
- Toast Notification Codepen
- Toast Notification Example
- Toast Notification Javascript
- Toastr Jquery Example
- Toast Notification Example
- Toastr Jquery Example
- Bootstrap Toast Notification Jquery
- Jquery Toast Message Jsfiddle
- Jquery Toast Codepen Type
- Toast Notification Codepen Type
- Toast Notification Javascript
