JSFiddle - React, Tailwind, and code Playground

by wstolarski_consdata

HTML

<h2>Dialog modalny</h2>
<button onclick="showModalDialog()">Otwórz dialog</button>
<br>
<button onclick="closeModalDialog()">Hej! Nie możesz mnie kliknąć kiedy dialog <b>modalny</b> jest otwarty 😞</button>

<dialog id="modalDialog">
  Witaj 👋! <br> Możesz zamknąć mnie przy użyciu poniższych przycisków lub przy użyciu klawisza "Escape" <br>
  
  <button onclick="closeModalDialog()">Zamknij przy użyciu metody close()</button>
  
  <form method="dialog">
    <button>Zamknij przy użyciu method="dialog"</button>
  </form>
  
</dialog>


<hr>

<h2>Dialog niemodalny</h2>
<button onclick="showNonModalDialog()">Otwórz dialog</button>
<br>
<button onclick="closeNonModalDialog()">Hej! możesz mnie kliknąć kiedy dialog <b>niemodalny</b> jest otwarty 😃</button>

<dialog id="nonModalDialog">
  Witaj 👋! <br> Nie możesz użyć klawiszu "Escape", aby mnie zamknąć 🤪<br>
  
  <button onclick="closeNonModalDialog()">Zamknij przy użyciu metody close()</button>
  
  <form method="dialog">
    <button>Zamknij przy użyciu method="dialog"</button>
  </form>
  
</dialog>

JavaScript

const modalDialog = document.getElementById('modalDialog');
  const nonModalDialog = document.getElementById('nonModalDialog');

  function showModalDialog() {
    modalDialog.showModal();
  }

  function closeModalDialog() {
    modalDialog.close();
  }

  function showNonModalDialog() {
    nonModalDialog.show();
  }

  function closeNonModalDialog() {
    nonModalDialog.close();
  }