主页 / coding / 问题 / 77053524
Accepted
greenoldman
Asked: 2023-09-06 23:48:21 +0800 CST

如何禁用模式对话框的任何后台交互

  • 772

我有一个<dialog>通过 JS 调用显示的元素showModal。理论上，它应该为我提供模式对话框（至少从名称上可以看出），但我可以与后台的内容进行交互。例如，如果我的主页包含一些可滚动的内容div，我可以使用前面的“模式”对话框滚动它。

如何完全禁用与背景元素的任何交互？目前我的问题是滚动，但我敢打赌还有更多有待发现。

html

1 个回答

  1. Best Answer

    当我理解你的问题时，我可以给你一个想法；要创建一个完全禁用与背景元素交互（包括滚动）的模式对话框，您可以执行以下操作：

    
<style>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    z-index: 1000; /* Ensure it's above other content  (modal content must be largest that this value)*/
 }
</style>
<!-- Modal Trigger Button -->
<button id="openModalButton">Open Modal</button>

<!-- Modal Dialog -->
<dialog id="myModal">
  <p>This is a modal dialog</p>
  <button id="closeModalButton">Close</button>
</dialog>

<!-- Overlay -->
<div class="modal-overlay" id="overlay"></div>

<script>
  const openModalButton = document.getElementById('openModalButton');
  const closeModalButton = document.getElementById('closeModalButton');
  const myModal = document.getElementById('myModal');
  const overlay = document.getElementById('overlay');

  openModalButton.addEventListener('click', () => {
    myModal.showModal();
    overlay.classList.add('modal-overlay');
    disableScroll();
  });

  closeModalButton.addEventListener('click', () => {
    myModal.close();
    overlay.classList.remove('modal-overlay');
    enableScroll();
  });

  function disableScroll() {
    document.body.style.overflow = 'hidden';
  }

  function enableScroll() {
    document.body.style.overflow = '';
  }
</script>
    • 1

相关问题