Início / coding / Perguntas / 77053524
Accepted
greenoldman
Asked: 2023-09-06 23:48:21 +0800 CST

Como desabilitar qualquer interação em segundo plano para diálogo modal

  • 772

Eu tenho um <dialog>elemento que exibo via chamada JS showModal. Em teoria, deveria me proporcionar um diálogo modal (pelo menos o nome sugere), mas ainda assim posso interagir com o conteúdo em segundo plano. Por exemplo, se minha página principal contiver algum scrollable div, posso rolar com a caixa de diálogo "modal" na frente.

Como posso desabilitar totalmente qualquer interação com os elementos de fundo? Atualmente meu problema é a rolagem, mas aposto que há mais para descobrir.

html

1 respostas

  1. Best Answer

    Pelo que entendi sua pergunta, posso lhe dar uma ideia; Para criar uma caixa de diálogo modal que desative completamente a interação com elementos de fundo, incluindo rolagem, você pode fazer algo assim:

    
<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

relate perguntas