Tất cả bài viết  |  CSS

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Cách tạo thông báo với hiệu ứng fadeIn và fadeOut

Trong bài học lập trình web này các Bạn sẽ được Cách tạo thông báo tự đóng bằng Bootstrap

Bước 1: Tạo cấu trúc HTML
 
 

  

   

    
Đăng ký thành viên VIP365

    
Thỏa sức học thiết kế web và lập trình web với tài khoản VIP365 tại website hocwebgiare.com
     
Khi đăng ký thành viên VIP / 1 năm học là 500.000 đ/năm - học viên sẽ được HỌC TOÀN BỘ TẤT CẢ CÁC KHÓA HỌC THIẾT KẾ WEB & LẬP TRÌNH WEB TẠI WEBSITE HOCWEBGIARE.COM trong vòng 1 năm (365 ngày)
Bước 2: Định dạng CSS
body {	
margin: 0px 0px 0px 0px;	
background-color:white;	
color: black;
}

#demo-notif {
	margin-top: 150px;	
text-align: center;
}
#demo-notif button {	
border: solid 2px white;	
padding: 40px;	
min-width: 10%;	
margin-top: 2%;	
margin-left: 1%;	
text-align: center;	
font-weight: bold;	
margin-bottom: 2%;	
cursor: pointer;
}
.notification {	display: none;}
.dark-back {	
position: fixed;	
z-index: 2;	
top: 0px;	
opacity: 0.9;	
background-color: black;	
width: 100%;	
height: 100%;
}
.win8-notif-body {	
position: fixed;	
z-index: 3;	
top:30%;	
margin: 0px 0px 0px 0px;	
text-align: left;	
min-height: 20%;	
padding: 40px 20% 40px 20%;	
font-family: sans-serif;
}
.win8-notif-body h3 {	
font-size: 1.5em;
}
.win8-notifiy-body p {	
font-size: 1em;
}
.win8-notif-button {	
border: solid 2px white;	
padding: 10px;	
min-width: 10%;	
display: block;	
margin-top: 2%;	
margin-left: 2%;	
float: right;	
font-weight: bold;	
margin-bottom: 2%;
}
.black {	
background-color:rgb(39, 37, 37);	
color:white;
}
.black button {	
background-color:rgb(66, 60, 60);	
cursor: pointer;	
color: white;
}
.black .win8-notif-body {	background-color:rgb(39, 37, 37);	color:white;}
.black button:hover {	background-color:rgb(182, 44, 88);}
.green {	background-color:rgb(50, 179, 106);	color:white;}
.green button {	background-color:rgb(50, 179, 106);	
cursor: pointer;	color: white;}
.green .win8-notif-body {	background-color:rgb(50, 179, 106);	
color:white;
}
.green button:hover {	background-color:rgb(29, 92, 56);}
.teal {	background-color:#008299;	color:white;}
.teal button {	background-color:#008299;	cursor: pointer;	color: white;}
.teal .win8-notif-body {	background-color:#008299;	color:white;}
.teal button:hover {	background-color:#00A0B1;}

.blue {	background-color:#2672EC;	color:white;}
.blue button {	background-color:#2672EC;	cursor: pointer;	color: white;}
.blue .win8-notif-body {	background-color:#2672EC;	color:white;}
.blue button:hover {	background-color:#2E8DEF;}

.purple {	background-color:#8C0095;	color:white;}
.purple button {	background-color:#8C0095;	cursor: pointer;	color: white;}
.purple .win8-notif-body {	background-color:#8C0095;	color:white;}
.purple button:hover {	background-color:#A700AE;}

.dark-purple {	background-color:#5133AB;	color:white;}
.dark-purple button {	background-color:#5133AB;	cursor: pointer;	color: white;}
.dark-purple .win8-notif-body {	background-color:#5133AB;	color:white;}
.dark-purple button:hover {	background-color:#643EBF;}

.pink {	background-color:rgb(244, 114, 208);	color:white;}
.pink button {	background-color:rgb(244, 114, 208);	cursor: pointer;	color: white;}
.pink .win8-notif-body {	background-color:rgb(244, 114, 208);	color:white;}
.pink button:hover {	background-color:#BF1E4B;}

.red {	background-color:#AC193D;	color:white;}
.red button {	background-color:#AC193D;	cursor: pointer;	color: white;}
.red .win8-notif-body {	background-color:#AC193D;	color:white;}
.red button:hover {	background-color:#BF1E4B;}

.orange {	background-color:#D24726;	color:white;}
.orange button {	background-color:#D24726;	cursor: pointer;	color: white;}
.orange .win8-notif-body {	background-color:#D24726;	color:white;}
.orange button:hover {	background-color:#DC572E;}

.amber {	background-color:rgb(240, 163, 10);	color:white;}
.amber button {	background-color:rgb(240, 163, 10);	cursor: pointer;	color: white;}
.amber .win8-notif-body {	background-color:rgb(240, 163, 10);	color:white;}
.amber button:hover {	background-color:rgb(227, 200, 0);}

.yellow {	background-color:rgb(227, 200, 0);	color:white;}
.yellow button {	background-color:rgb(227, 200, 0);	cursor: pointer;	color: white;}
.yellow .win8-notif-body {	background-color:rgb(227, 200, 0);	color:white;}
.yellow button:hover {	background-color:rgb(240, 163, 10);}

.brown {	background-color:rgb(130, 90, 44);	color:white;}
.brown button {	background-color:rgb(130, 90, 44);	cursor: pointer;	color: white;}
.brown .win8-notif-body {	background-color:rgb(130, 90, 44);	color:white;}
.brown button:hover {	background-color:rgb(240, 163, 10);}

a{color:#FFFFFF;text-decoration:none;}
a:visited{color:#FFFFFF;text-decoration:none;
}a:hover{color:#FFFFFF;text-decoration:none;
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
Bước 5: Tạo hiệu ứng fadeIn và fadeOut bằng JQUERY
var def="black";	
function showNotification(color){	
			$("#notification").removeClass(def);	
			$("#notification").addClass(color);	
			def=color;				
$("#notification").fadeIn("slow");	
			$(".win8-notif-button").click(function(){	
	$(".notification").fadeOut("slow");	
})
;		}
Xem  demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất

CSS   Xem (2821)   Học thiết kế web giá rẻ

Tìm kiếm phổ biến