كيفية إنشاء نافذة منبثقة بغرض الخروج

هل تعرف تلك النوافذ المنبثقة المزعجة التي تظهر عندما تحاول إغلاق نافذة المتصفح؟

إنهم يعرفون بطريقة ما أنك تحاول إغلاقها ، مثل ما إذا كان بإمكانهم قراءة أفكارك.

في الواقع ، إنه مفهوم بسيط جدًا ، عليك الاستماع إلى حدث DOM معين.

أنا بالتأكيد لا أوصي باستخدام النوافذ المنبثقة ، لأنني أجدها مزعجة ، لكن شركتك قد تطلب منك تنفيذ واحدة ، لذلك نحن هنا.

أحب أن أبقي الأمور بسيطة ، لذا ها هي HTML

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

أضف CSS هذا:

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; }

و JavaScript هذا:

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) } }) })

شاهده في Codepen:

انظر القلمخروج نية منبثقة ، تنفيذ بسيطبقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.

Tech Wiki Online!