/ 3 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.

Popup bằng css

Để 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é!
Gửi bài hoặc câu hỏi về thienlong433@gmail.com

Ý kiến bạn đọc (3)

  1. Cái này có lưu cookie không em? hay vào sẽ nhận thông báo lần 1, đọc bài viết lại bật thông báo lần 2 nữa?

    Trả lờiXóa
  2. Cookie e sẽ viết ở bài sau, cookie 24h nhé

    Trả lờiXóa
    Trả lời
    1. ok em, lưu cookie như vậy anh nghĩ rất hợp lý (tránh phiền cho độc giả)

      Xóa

Hình ảnh chủ đề của Mae Burke