cssの属性使うことで簡単にダイアログを出す

saikisaiki

  • ダイアログ出ない
    abc.com#

  • ダイアログ出る
    abc.com#dialog-container

※cssが500字以内に収まらなかった

<div class="dialog-container" id="dialog-container">
  <div class="dialog-wrapper">
    <div class="dialog-box">
      <h4>ダイアログでます！</h4>
      <a href="#">閉じる</a>
    </div>
  </div>
</div>
.dialog-container:not(:target)  {
  opacity: 0;
  z-index: 0;
  display:none;
}

.dialog-container:target {
  opacity: 1;
  transition: opacity .4s;
  z-index: 100;
}