如何故意凍結瀏覽器窗口（如警報、確認和提示）？

Question

有沒有辦法像alert 、 confirm和prompt （簡而言之：“acp”）那樣故意凍結瀏覽器窗口？

我想顯示一個帶有自定義 css 的模態對話框，而不是“acp”的本機彈出窗口，但也希望能夠凍結瀏覽器，直到我得到用戶反饋，就像“acp”一樣。

但是人，為什么？ 這是不好的做法（呃，我必須投反對票）！
所以當這是不好的做法時 - 那么為什么“acp”實際上提供這種同步行為？ 因為在某些特定場景中，它恰好是適當 UX 的正確工具。 那些原生模態確實看起來很丑陋，同時也非常有限。

這只是一個快速而骯臟的示例，在該示例中，在用戶提供反饋之前凍結瀏覽器是完全可以的。 假設我們有一個帶有input[type="reset"]元素的form 。 因此，在我們真正讓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 使它成為可能......

---

注意：我確切地知道如何最終實現相同的結果，但我正在尋找一個實際的凍結/同步功能，以保持代碼直接並減少黑客攻擊。

Answer 1

您不能像本機對話框那樣凍結瀏覽器應用程序。 這些不是用 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>

Answer 2

除了彈出窗口之外，您可以將所有內容放在 div 中。 然后，您可以通過 css 打開/關閉指針事件。

div 中的所有內容將不再可交互。 這將產生凍結瀏覽器窗口的外觀。

.freeze { pointer-events: none; }

注意：當向元素添加pointer-events ，這也會影響所有子元素，因此將其放置在主體上也會鎖定彈出窗口。

一旦彈出窗口關閉，我們可以從 div 中刪除freeze類，一切都會重新開始工作。

 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>