HTML - `dialog` element: scroll-Inhalte unabhängig von hintergrund

Ich bin versucht, den dialog element.

Wenn mein dialog/modal hat einen großen Inhalt, ich möchte die Benutzer in der Lage sein, um scrollen Sie es.

Aber ich will nicht scrollen zu gelten sowohl für den dialog/modal - und der hintergrund, was ist, was es zu tun scheint, standardmäßig.

Beispiel: https://output.jsbin.com/mutudop/3.

Wie kann ich Blättern gelten nur für den dialog/modal Inhalt, wenn der dialog/modal geöffnet ist?

Hinweis: ich bin nur daran interessiert, Lösungen mithilfe der systemeigenen dialog element.

1 Antworten

  • Csaba Farkas
    4. Mai 2019

    Sie können den Stil, den Inhalt Ihrer dialog um dies zu erreichen. Ich verwendet ein wrapper-div und flexbox in dem Beispiel unten.

    (function() {
  var openBtn = document.getElementById('open-dialog');
  var myDialog = document.getElementById('my-dialog');

  openBtn.addEventListener('click', function() {
    if (typeof myDialog.showModal === "function") {
      myDialog.showModal();
    } else {
      alert("Dialog API not supported by browser");
    }
  });

})();
    #my-dialog {
  width: 50%;
  max-height: 50vh;
  overflow-y: auto;
}

#my-dialog__content {
  display: flex;
  flex-direction: column;
  height: 150vh;
}

menu {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

#cancel-button {
  width: 100%
}
    <div id="container">
  <dialog id="my-dialog">
    <div id="my-dialog__content">
      <form method="dialog">
        <menu>
          <button id="cancel-button" value="cancel">Cancel</button>
        </menu>
      </form>
    </div>
  </dialog>

  <menu>
    <button id="open-dialog">Open Dialog</button>
  </menu>
</div>