【JavaScript】ボタン押してダイアログ表示する方法～外タップで閉じる方法も～

中山テック 代表の中山です。

とある人気ゲームレビューと東京競馬場、中山競馬場のブログをちょっと前に分割しました。

その際に見たい内容が分散してしまい「どこのブログに載っていたか」がわかり辛い！

ということもあり、各テーマでの索引を追従メニューとして追加しました。

どのように実装すれば良いのか、JavaScript＆CSSのプログラムを交えてご紹介いたします。

HTML

<div id="sakuin-select">　⇒①
  <button id="sakuinButton" class="koukoku-select">中山索引</button>
</div>

<dialog id="sakuinDialog">　⇒②
  <div id="nakayamaDialogInner"></div>
</dialog>

CSS

#sakuin-select {
  position: fixed;
  display: block;
  z-index: 998;
  bottom: 30px;
}

• システム開発関連記事

JavaScript

ダイアログにメニューを設定

// メニュー固定＆ダイアログ対応 ※中山競馬場
if(document.getElementById('nakayamaDialogInner') != null) {
  document.getElementById('nakayamaDialogInner').innerHTML = nakayamaDialogInnerList;
}

～中略～
const nakayamaDialogInnerList = ' \
  【大分類】<br>\
  <a href="https://nakayama-tech.com/2021/12/12/nakayama-keiba/">TOP</a><br>\
  <a href="https://nakayama-tech.com/2023/11/06/nakayama-keiba-access-uchibaba/">アクセス・入場方法</a><br>\
  <a href="https://nakayama-tech.com/2023/11/06/nakayama-keiba-shisetsu/">各種施設のご案内</a><br>\
・
・
・
【他】<br>\
<a href="https://nakayama-tech.com/2023/11/06/nakayama-keiba-parkwins/#i-5">TUFFY SHOP</a><br>\
';

ダイアログ表示制御

↓↓↓ グローバル領域
 ↓↓↓

var buttonId;        // メニューボタン
var sakuinDialog;    // ダイアログメニュー

↓↓↓ onload領域 ↓↓↓

// メニュー固定＆ダイアログ対応 ボタン設定
if(document.getElementById("sakuinButton") != null) {
  buttonId = document.getElementById("sakuinButton");　⇒①
}
// メニュー固定＆ダイアログ対応 ダイアログ設定
if(document.getElementById("sakuinDialog") != null) {
  sakuinDialog = document.getElementById("sakuinDialog");　⇒②
}

//ダイアログを開くイベント
if(buttonId != null) {
  buttonId.addEventListener("click", () => {
    sakuinDialog.showModal();　⇒③
  });
}

//ダイアログを閉じるイベント
if(sakuinDialog != null) {
  sakuinDialog.addEventListener('click', (event) => {

    if(document.getElementById('karizDialogInner') != null) {
      if(event.target.closest('#karizDialogInner') === null) {
        sakuinDialog.close();
      }
    } else if(document.getElementById('fuchuDialogInner') != null) {
      if(event.target.closest('#fuchuDialogInner') === null) {
        sakuinDialog.close();
      }
    } else if(document.getElementById('nakayamaDialogInner') != null) {
      if(event.target.closest('#nakayamaDialogInner') === null) {
        sakuinDialog.close();　⇒④
      }
    }
  });
}