javascript - 如何覆盖全页按钮，按下该按钮将关闭浏览器

Question

因此，在我的 POS 系统中，我有一个客户显示屏，它是一个全屏 html Internet Explorer 窗口，其中包含本地托管的 html。有时这个窗口会跳回 POS 软件前面，并且由于 POS 只能左键单击，所以我无法关闭它。我是否可以在 html 内容前面放置一个全屏透明按钮，以便每当单击该屏幕时它就会关闭？

Answer 1

是的，您可以使用 CSS 将按钮放置在浏览器视口(viewport)的中心。

• 使用 position:fixed; 保持按钮相对于视口(viewport)的位置。
• 使用 z-index: 9999; 使按钮始终位于 HTML 页面顶部。
• 使用 left 和 top 属性来定位按钮，calc 允许动态计算 CSS 属性值，50vw 你告诉浏览器定位在视口(viewport)宽度的 50%，50px 是按钮宽度和高度的 50%，因此它将始终定位在视口(viewport)的中心。

#close{
  position:fixed;
  width:100px;
  height: 100px;
  left: calc(50vw - 50px);
  top: calc(50vh - 50px);
  z-index: 9999;
}

<button id="close" type="button">Close Window!</button>