如何故意冻结浏览器窗口(如警报，确认和提示)? [英] How to freeze browser window intentionally (like alert, confirm and prompt does)?

问题描述

有没有办法像 alert ， confirm 和 prompt (简称:"acp")那样故意冻结浏览器窗口??

Is there any way of freezing the browser window intentionally like alert, confirm and prompt (in short: "acp") does?

我想显示一个带有自定义CSS的模式对话框，而不是"acp"的本机弹出窗口.但也希望能够冻结浏览器，直到我收到用户的反馈，就像"acp"一样.

I want to show a modal dialog with custom css instead of the native popups for "acp" but also want to have the ability to freeze the browser until I have users feedback just like "acp".

但是，伙计，为什么呢?这是不好的做法(嗯，我得投票)！
因此，当这是不好的做法时-那么为什么"acp"会失败呢?实际提供这种同步行为?因为在某些特定情况下，它恰恰是合适的UX的正确工具.那些本机模式的外观确实很丑陋，同时也非常有限.

But man, why? This is bad practice (uh I have to downvote)!
So when it is bad practice - then why does "acp" actually offer this synchronous behavior? Because in some particular scenarios its just exactly the right tool for an appropriate UX. Those native modals do look so ugly and are also very limited at the same time.

这里仅是一个简单而又肮脏的示例，在该示例中，冻结浏览器直到用户提供反馈是完全可以的.假设我们有一个 form ，其中包含一个 input [type ="reset"]] -元素.因此，在我们真正让 form 重置之前，我们向用户询问类似的内容:您确定要重置(数据将丢失)吗?".

Here's just one quick and dirty example where it would be totally fine to freeze the browser until the user gives feedback. Lets say we have a form with an input[type="reset"]-element. So before we really let the form reset we ask the user something like: "Are you sure you want to reset (data will be lost)?".

如果我对本机模态外观没问题(不是)，我可以这样做:

If I would be fine with the native modal look (which I'm not) I could do:

var handleSubmit = function( e ) {
  confirm('Are you sure you want to reset (data will be lost)?') || e.preventDefault()
};
$('form').on( 'reset', handleSubmit ); // just using jQuery here for the sake of shortness

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input placeholder="type something, reset and cancel to keep input value" style="width:100%">
  <input type="reset">
</form>

因此，每个人"应该同意(或至少有人可以)，这不是一个坏习惯，对吧?
但是，如何通过自定义样式的modal/dialog/popup实现相同的功能?
我-当然-不是要 HTML / CSS 部分，而是要具有通过JavaScript冻结浏览器窗口的功能！

So "everybody" should agree (edit: or at least somebody could) this isn't bad practice, right?
But how can we achieve the same with a custom styled modal/dialog/popup?
I'm -of course- not asking for the HTML/CSS part but for the capability of freezing the browser window via JavaScript!

说实话，我实际上希望对此有所投票，但也许有一个 Killer JavaScript Ninja ，他拥有一个特殊的技巧以使其成为可能...

To be honest, I actually expect some downvotes for this but maybe there is this one Killer JavaScript Ninja, who have this one special hack to make it possible...

注意:我确切地知道最终如何获得相同的结果，但是我正在寻找一种实际的冻结/同步功能，以使代码简单明了，减少黑客攻击.

NOTE: I know exactly how to achieve the same result in the end but I'm looking for an actual freeze/synconous feature to keep the code straight forward and less hack-ish.

推荐答案

您可以将除弹出窗口之外的所有内容都放置在div中.然后，您可以通过CSS打开/关闭指针事件.

You can place everything within a div except for your popup. You can then turn on/off pointer events via css.

div中的所有内容都将不再是可交互的.这样会冻结浏览器窗口.

Everything within the div will no longer be interactable. This will give the appearance of freezing the browser window.

.freeze { pointer-events: none; }

注意:向元素添加 pointer-events 时，这也会影响所有子元素，因此将其放置在主体上也会锁定弹出窗口.

Note: When adding pointer-events to an element this affects all child elements as well, so placing it on the body would also lock the popup.

一旦弹出窗口关闭，我们就可以从div中删除 freeze 类，一切将重新开始.

Once the popup has been closed, we can remove the freeze class from the div and everything will start working again.

const content = document.getElementById('content')
const overlay = document.querySelector('.overlay')
const a = document.querySelector('.open-overlay')
const close = document.querySelector('.overlay .close')

// Open a popup and freeze the browser content
a.addEventListener('click', e => {
  e.preventDefault()
  content.classList.add('freeze')
  overlay.classList.remove('hidden')
})

// Close the popup window and unfreeze the browser content
close.addEventListener('click', e => {
  e.preventDefault()
  content.classList.remove('freeze')
  overlay.classList.add('hidden')
})

.freeze { pointer-events: none; }

.hidden { display: none; }

.overlay {
  position: fixed;
  z-index: 100;
  padding: 20px;
  background: white;
  border: solid 1px #ccc;
  width: 300px;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="overlay hidden">
  <h1>Overlay</h1>
  <a href="" class="close">Close</a>
</div>

<div id="content">
  <a href="" class="open-overlay">Open Overlay</a>

  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <form>
    <input type="text">
  </form>
</div>

这篇关于如何故意冻结浏览器窗口(如警报，确认和提示)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！