19:57 - 17/6/18 / 4 nhận xét

Tạo popup thông báo khi vào blog bằng css

Thông thường thì người ta hay sử dụng javascript để tạo thông báo khi mới vào trang web. Nhưng với sự phát triển mạnh mẽ của css, bây giờ đã có thể tạo popup thông báo hoàn toàn bằng css rồi.

Để tạo thông báo như hình trên, chúng ta sẽ sử dụng CSS kết hợp HTML. Chúng ta chỉ việc nhét toàn bộ code này vào trên thẻ đóng </body>

<style>
#notify{width:100%;height:100%;background:rgba(0,0,0,0.4); position:absolute;top:0;z-index:9999}
.notify{top:45%;left:50%;transform:translate(-50%,-50%);height:220px;width: 500px;max-width:90%;overflow: hidden;background: #fff; border-radius: 10px; border: 1px solid #ddd; z-index: 10000;position: fixed; }
.notify h3{color:rgba(0,0,0,.65);margin:10px 0;position:relative;padding:15px;font-weight:600;font-size:27px;text-align:center}
.notify p{line-height:1.6;margin:0 0 20px;color:#646464;font-size:18px;text-align:center;padding:10px 20px}
.ok-button{background:#7cd1f9;color:#fff;font-weight:600;font-size:14px;padding:10px 20px;border-radius:5px;text-align:center;cursor: pointer;}
.ok-button:hover{border:double #eee;background:#5c90d2;padding:8px 18px;color:#fff;transition:0s;cursor: pointer;}
</style>
<div id='notify'>
<div class='notify'>
  <h3> Thông báo </h3>
  <p> Chào mừng đến với Blogkiemtien.vn<br/> Ấn OK để đóng thông báo </p>
<center><a class='ok-button' onclick='document.getElementById(&#39;notify&#39;).style.display = &#39;none&#39;'>OK</a></center>
  </div>
</div>

Thay đổi cho phù hợp với blog của bạn nhé.

Rất đơn giản phải không nào! Các bạn muốn mình viết thủ thuật gì, hãy bình luận bên dưới nhé!