窗口怎么退出扩展窗口_如何创建退出意图弹出窗口

最新推荐文章于 2024-11-04 16:17:23 发布

cuk0051

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量174

点赞数

文章标签： js javascript java dom web ViewUI

原文链接：https://flaviocopes.com/tutorial-exit-intent-popup/

版权

窗口怎么退出扩展窗口

You know those annoying popups that appear when you try to close a browser window?

您知道尝试关闭浏览器窗口时出现的那些烦人的弹出窗口吗？

They somehow know you’re trying to close it, like if they can read your mind.

他们以某种方式知道您要关闭它，就像他们能读懂您的想法一样。

In reality it’s a pretty simple concept, you have to listen to a specific DOM event.

实际上，这是一个非常简单的概念，您必须收听特定的DOM事件。

I certainly do not recommend the use of popups, because I find them annoying, but your company might ask you to implement one, so here we are.

我当然不建议使用弹出窗口，因为我觉得它们很烦人，但是您的公司可能会要求您实现弹出窗口，所以我们来了。

I like to keep things simple, so here’s the HTML

我想保持简单，所以这里是HTML

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

Add this CSS:

添加此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;
}

and this JavaScript:

和这个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)
    }
  })
})

See it in Codepen:

在Codepen中查看：

See the Pen Exit intent popup, simple implementation by Flavio Copes (@flaviocopes) on CodePen.

请参见Pen Exit意图弹出窗口，由Flavio Copes( @flaviocopes )在CodePen上简单实现。

The page should appear pretty boring:

该页面应该看起来很无聊：

If you try loading and getting in/out of the page with the mouse, you should see a popup appearing:

如果尝试用鼠标加载和进入/退出页面，应该会看到一个弹出窗口：

This is due to the fact we listen on the mouseout event, and we want 1 second before showing the popup.

这是由于我们侦听mouseout事件，因此我们需要1秒才能显示弹出窗口。

Once you have the basics in, you can start adding fancy things like closing the popup if the user presses the esc key:

一旦掌握了基础知识，就可以开始添加一些奇特的功能，例如如果用户按下esc键，则关闭弹出窗口：

const hide = () => {
  const element = document.querySelector("#popup")
  element.style.visibility = "hidden"
  element.style.opacity = "0"
  element.style.transform = "scale(0.5)"
  element.style.transition = "0.2s, opacity 0.2s, visibility 0s 0.2s"
}

document.addEventListener("DOMContentLoaded", () => {
  document.onkeydown = event => {
    event = event || window.event
    if (event.keyCode === 27) {
      hide()
    }
  }
})

and if the user clicks the document ouside the modal:

并且如果用户单击文档ide模态：

let eventListener

//inside show()
eventListener = document.addEventListener("click", function (clickEvent) {
  let el = clickEvent.target
  let inPopup = false
  if (el.id === 'popup') {
    inPopup = true
  }
  while (el = el.parentNode) { 
    if (el.id == "popup") {
      inPopup = true
    }
  }
  if (!inPopup) hide()
})

//inside hide()
if (eventListener) {
  document.removeEventListener(eventListener)
}

Example on Codepen:

Codepen上的示例：

See the Pen Exit intent popup, implementation with hide() by Flavio Copes (@flaviocopes) on CodePen.

见笔退出意图弹出，执行与隐藏()由弗拉维奥科佩斯( @flaviocopes上) CodePen 。

Now, an interesting thing to do is to store the fact we showed the modal in a cookie, so we only show it once to every person.

现在，有趣的事情是将我们显示的模态存储在cookie中，因此我们只向每个人显示一次。

This is a possible implementation: we set the popup=true cookie when we show the modal, and we check for the cookie before showing it again:

这是一个可能的实现：在显示模式时，我们设置popup=true cookie，然后在再次显示之前检查cookie：

let showed = false;

const show = () => {
  if (showed) return;

  if (
    document.cookie.split(";").filter((item) => {
      return item.includes("popup=");
    }).length
  ) {
    return;
  } else {
    console.log(
      document.cookie.split(";").filter((item) => {
        return item.includes("popup=")
      }).length
    )
    console.log(document.cookie.split(";"))
  }

  document.cookie = "popup=true;path=/;max-age=15768000"
  showed = true

  //...the remaining part of show()