Cách tạo cửa sổ bật lên ý định thoát

Bạn có biết những cửa sổ bật lên gây phiền nhiễu xuất hiện khi bạn cố gắng đóng cửa sổ trình duyệt không?

Bằng cách nào đó họ biết bạn đang cố gắng đóng nó lại, như thể họ có thể đọc được suy nghĩ của bạn.

Trong thực tế, đó là một khái niệm khá đơn giản, bạn phải lắng nghe một sự kiện DOM cụ thể.

Tôi chắc chắn không khuyên bạn nên sử dụng cửa sổ bật lên, vì tôi thấy chúng gây phiền nhiễu, nhưng công ty của bạn có thể yêu cầu bạn triển khai một cửa sổ bật lên, vì vậy chúng tôi xin đưa ra.

Tôi muốn giữ mọi thứ đơn giản, vì vậy đây là HTML

<!doctype html>
<head>
  <title>Popup page</title>
</head>
<body>
  <div id="popup">
    <h3>Popup!</h3>
  </div>
</body>

Thêm CSS này:

body {
  font-family: system-ui;
  background-color: #f6d198;
}

#popup { position: fixed; width: 100%; visibility: hidden; z-index: 10002; top: 0; opacity: 0; transform: scale(0.5); transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; position: relative; margin: 0 auto; text-align: center; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); width: 60%; background: #862a5c; padding-bottom: 100px; padding-top: 50px; color: #fff; font-size: 2rem; }

và JavaScript này:

const show = () => {
  const element = document.querySelector("#popup")
  element.style.visibility = "visible"
  element.style.opacity = "1"
  element.style.transform = "scale(1)"
  element.style.transition = "0.4s, opacity 0.4s"
}

document.addEventListener(“DOMContentLoaded”, () => { document.addEventListener(“mouseout”, (event) => { if (!event.toElement && !event.relatedTarget) { setTimeout(() => { show() }, 1000) } }) })

Xem nó trong Codepen:

Xem bútCửa sổ bật lên ý định thoát, triển khai đơn giảnbởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!