dialogタグ、edgeやsafariで動作しない。からの修正案

HTML5で追加されたdialogタグ。

<dialog>: ダイアログ要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

とても便利なタグではあるが、主要ブラウザのedgeやsafariで、まだ動作しないのが難点である。

chromeなどの対応ブラウザのみで開発していた場合、気付かずにリリースしてしまうと対応で慌てることに。

その時にすぐに修正できるよう、dialogタグでの実装構造そのままの代替策をメモしておく。

dialogタグ代替策

変更前

HTML
<dialog>
  <p>ダイアログ表示部分です。</p>
  <button class="close_dialog">ダイアログを閉じる</button>
</dialog>
<button class="open_dialog">ダイアログを開く</button>

CSS
.open_dialog,
.close_dialog {
  cursor: pointer;
}

Javascript(jQuery)
/* オープン処理 */
$(document).on("click", ".open_dialog", function(){
  var dialog = $(this).prev();
  dialog.showModal();
});

/* クローズ処理 */
$(document).on("click", ".close_dialog", function(){
  var dialog = $(this).parent();
  dialog.close();
});

変更後

赤字が変更箇所。

HTML
<div class="dialog">
  <p>ダイアログ表示部分です。</p>
  <button class="close_dialog">ダイアログを閉じる</button>
</div>
<button class="open_dialog">ダイアログを開く</button>

CSS
.dialog {
  display: none;
  position: fixed;
  top: 50%;
  height: auto;
  overflow: hidden;
  z-index: 9999;
}

.open_dialog,
.close_dialog {
  cursor: pointer;
}

Javascript(jQuery)
/* オープン処理 */
$(document).on("click", ".open_dialog", function(){
  var dialog = $(this).prev();
  var leftPos = (($(window).width() - dialog.outerWidth(true)) / 2);
  var topPos = (($(window).height() - dialog.outerHeight(true)) / 2);
  dialog.css({"left": leftPos + "px"});
  dialog.css({"top": topPos + "px"});
  dialog.show();
});

/* クローズ処理 */
$(document).on("click", ".close_dialog", function(){
  var dialog = $(this).parent();
  dialog.hide();
});