本文共 4024 字,大约阅读时间需要 13 分钟。
窗口怎么退出扩展窗口
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
Popup page Popup!
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 by Flavio Copes () on .
请参见Pen 由Flavio Copes( )在上 。
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 by Flavio Copes () on .
见笔由弗拉维奥科佩斯( 上) 。
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()
翻译自:
窗口怎么退出扩展窗口
转载地址:http://aamgb.baihongyu.com/