javascript - 如何故意卡住浏览器窗口(如警报、确认和提示)？

Question

有没有办法像 alert 那样故意卡住浏览器窗口？ , confirm和 prompt (简而言之:“acp”)呢？
我想显示一个带有自定义 css 的模式对话框，而不是“acp”的 native 弹出窗口，但也希望能够卡住浏览器，直到我有用户反馈，就像“acp”一样。
但是，伙计，为什么？这是不好的做法(呃，我必须投反对票)!
因此，如果这是不好的做法 - 那么为什么“acp”实际上提供了这种同步行为？ 因为在某些特定情况下，它恰好是适合 UX 的正确工具。 那些原生模态看起来确实很丑，同时也非常有限。
这只是一个快速而肮脏的例子，在用户给出反馈之前卡住浏览器是完全可以的。假设我们有一个 form与 input[type="reset"] -元素。所以在我们真正让form重置我们会询问用户类似的问题:“您确定要重置(数据将丢失)吗？”。
如果我对原生模态外观(我不是)没问题，我可以这样做:

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>

所以“每个人”都应该同意(编辑:或者至少有人可以)这不是坏习惯，对吧？
但是我们如何使用自定义样式的模态/对话框/弹出窗口来实现相同的效果？
我 - 当然 - 不要求 HTML/ CSS除了通过 JavaScript 卡住浏览器窗口的能力之外!
老实说，我实际上希望对此有一些反对意见，但也许有一个 Killer JavaScript Ninja，他有一个特殊的 hack 来使它成为可能...

注意:我确切地知道如何最终获得相同的结果，但我正在寻找一个实际的卡住/同步功能，以保持代码直截了当，减少 hack-ish。

Answer 1

您不能像 native 对话框那样卡住浏览器应用程序。这些不是用 JavaScript 构建的，它们是用原生代码构建的，可以以任何方式影响浏览器应用程序。禁止 JavaScript 以这种方式影响客户端应用程序。

但是，您可以在浏览器窗口中卡住与页面内容的交互......

只需放置一个窗口大小 div固定定位的页面上方。这将阻止用户与主页(后面)上的任何内容进行交互。然后，在上面显示您的模式对话框。当用户清除模态框时，隐藏它和窗口大小的 div，从而使主页再次交互。

let modal = document.querySelector(".modal");
let pageCover = document.querySelector(".pageCover");
let main = document.querySelector("main");        

document.getElementById("open").addEventListener("click", function(){
  modal.classList.remove("hidden");
  pageCover.classList.remove("hidden"); 
  main.addEventListener("focus", preventFocus);
});


document.getElementById("close").addEventListener("click", function(){
  modal.classList.add("hidden");
  pageCover.classList.add("hidden"); 
  main.removeEventListener("focus", preventFocus);
});

function preventFocus (evt){
  evt.preventDefault();
}

.hidden { display:none; }

.pageCover { 
  position:fixed; 
  z-index:10; 
  background-color:rgba(0,0,0,.25); 
  width:100vw; 
  height:100vh; 
  top:0; 
  left:0;
}

.modal { 
  position:absolute; 
  z-index:100; 
  background-color:aliceblue;
  border:2px double grey;
  width:200px; 
  height:200px; 
  top:30%; 
  left:30%; 
  text-align:center;
}

.modalTitle {
  margin:0;
  background-color:#00a;
  color:#ff0;
  padding:5px;
  font-weight:bold;
  font-size:1.1em;
}

#close { 
  background-color:#800080;
  color:#ff0;
  border:1px solid #e0e0e0;
  padding:5px 10px;
}

#close:hover { background-color:#c000c0; }

<main>
  <h1>This is some page content</h1>
  <p>And more content</p>
  <button id="open">Click Me To Show Modal</button>
  <div>More content</div>
</main>

<div class="hidden pageCover"></div>

<div class="hidden modal">
  <div class="modalTitle">Modal Title Here</div>
  <p>
    Now, you can only interact with the contents of this "modal".
  </p>
  <button id="close" >Close</button>
</div>