Hướng dẫn tạo popup thông báo đẹp dưới góc màn hình khi click

Giả sử bạn muốn khi khách truy cập Blog click vào mục nào đó sẽ hiện thông báo bằng đoạn văn bản dưới góc màn hình có thể là bên trái hay bên phải. Cách này mình thấy Google hay một số trang web lớn hay sử dụng với các Blog của họ.

Mình thấy kiểu hiển thị này rất hay nên đã áp dụng vào Blog tiện đây cũng chia sẻ cách làm, nếu bạn thấy phù hợp thì thêm vào Blog của mình. Cách làm như sau:

Vì hướng dẫn của mình toàn sử dụng bằng jquery cho đơn giản cho nên lúc nào Blog cũng phải có sẵn link jquery.js chèn trước thẻ đóng </head>

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Đầu tiên các bạn đặt đoạn html sau ngay trước thẻ đóng </body>

Copy

<div class='modal'></div>

Tiếp theo các bạn chèn đoạn script sau ngay phía trên đoạn html bạn vừa chèn

Copy

<script>

//<![CDATA[

$('.button').click(function() {

  $('.modal').append('<div class="modal-dialog"><div class="modal-dialog-content">Đã Click!<svg class="modal-dialog-buttons"><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_close_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></div></div>')

  setTimeout(function() {

    $('.modal').empty()

  }, 3000)

  $('.modal-dialog-buttons').click(function() {

    $('.modal').empty()

  })

})

//]]></script>

Trong đó:

• .button: là class của phần tử khi click vào
• Đã Click!: Văn bản hiển thị trong hộp thông báo
• 3000: Thời gian hiển thị hộp thoại là 3s hết 3s hộp thoại tự ẩn

Như vậy với mỗi class hay id khác nhau cần click các bạn lại chèn 1 đoạn script tương tự như trên các bạn chỉ cần thay các đoạn mình đánh dấu màu xanh là được.

Các bạn chèn css của giao diện hộp thoại popup trước thẻ đóng ]]></b:skin>

Copy

.modal-dialog {

  box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149);

  -webkit-font-smoothing:antialiased;

  letter-spacing:.2px;

  -webkit-align-items:center;

  align-items:center;

  background-color:#202124;

  -webkit-border-radius:4px;

  border-radius:4px;

  bottom:0;

  -webkit-box-sizing:border-box;

  box-sizing:border-box;

  display:-webkit-box;

  display:-moz-box;

  display:-webkit-flex;

  display:-ms-flexbox;

  display:flex;

  -webkit-flex-wrap:wrap;

  flex-wrap:wrap;

  left:0;

  margin:20px;

  max-width:640px;

  min-height:50px;

  padding:8px 15px;

  position:fixed;

  right:auto;

  text-align:left;

  top:auto;

  white-space:normal;

}

.modal-dialog-content {

  font-size:15px;

  font-weight:400;

  color:#fff;

}

.modal-dialog-buttons {

  height:20px;

  width:20px;

  min-height:20px;

  min-width:20px;

  fill:#fff;

  vertical-align:middle;

  margin-left:15px;

  cursor:pointer;

}

@media (max-width:800px) {

  .modal-dialog {

    margin:15px;

  }

}

Các bạn kiểm tra demo bằng cách click vào button sau

Như vậy với chỉ vài thao tác đơn giản bạn đã thêm được hộp thoại popup thông báo đẹp dưới góc màn hình khi click mang lại phong cách chuyên nghiệp cho Blog của mình. Chấm hết bài!!!

Nội dung chính