배경

HTML

<input type="checkbox" id="toggle">
<label for="toggle">open modal</label>

<dialog>
  <p>This is a Modal</p>

  <label for="toggle">close Modal</label>
</dialog>

CSS

#toggle {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

#toggle:checked ~ dialog {
  display: block;
}

//ここからは見た目の調整

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

label {
  border: 5px solid gray;
  background-color: gray;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

dialog {
  border-radius: 5px;

  p {
    color: black;
  }
}

완성

총결산