JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<dialog id="demoDialog">
  Hey there! This is a dialog
  <button id="closeDialog">Close dialog</button>
</dialog>

<menu>
  <button id="openDialogButton">Open dialog box</button>
</menu>

<div class="top-layer">
  내가 더 높고 싶다. <br>
  난 z-index: 999999;
</div>

CSS

dialog {
  border: none;
  box-shadow: #00000029 2px 2px 5px 2px;
  border-radius: 10px;
  padding: 30px;
  background-color: pink;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
}
dialog::backdrop {
  background-color: #000000;
}

.top-layer {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 999999;
  padding: 50px;
  border: 3px solid red;
  background: red;
}

JavaScript

var openDialogButton = document.getElementById('openDialogButton');

var demoDialog = document.getElementById('demoDialog');

var closeDialog = document.getElementById('closeDialog');

// "Open dialog box" button opens the <dialog> modally
openDialogButton.addEventListener('click', function () {
  if (typeof demoDialog.showModal === "function") {
    demoDialog.showModal();
  } else {
    console.log("The <dialog> API is not supported by this browser");
  }
});

closeDialog.addEventListener('click', function() {
  demoDialog.close();
})