【JavaScript】JavaScriptでモーダルウインドウで情報を表示する

2021年2月27日2021年4月21日

店舗名や学校名をクリックしたときにモーダルウインドウで住所や電話番号を表示させる方法です。

詳細情報を見せたいけど画面遷移させてしまって離脱させたくないLPなどに有効です。

Javascript、CSSで使用します。(jQueryを使ったほうが簡単かもしれません。)

//<body>の下に下記を追加する	
  <!-- modal -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <div class="modal-body">
                <div id="schoolName"></div>
                <div id="schoolAddress"></div>
            </div>
        </div>
    </div>
	<!-- end modal -->

//onclick と　ID属性を追加する
<h1 id=0 onclick="modal_open()">〇〇学校</h1>

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    }
    
.modal-content{
    background-color: white;
    width: 80%;
    margin: 40% auto;
    }

window.addEventListener('click', function(e) {
    if (e.target == modal) {
      modal.style.display = 'none';
    }
  });

function modal_open(e){
  //モーダルを表示
    modal.style.display = 'block';
  //クリックしたボタンのIDを取得
    let eve = e || window.event;
    let elem = eve.target || eve.srcElement;
    let elemId = elem.id;

  //schoolList(連想配列)からデータを取得しモーダルに表示させる
    document.getElementById("schoolName").innerText=schoolList[elemId].name;
    document.getElementById("schoolAddress").innerText=schoolList[elemId].address;

}

//連想配列
const schoolList = [
    {name: "東京大学",pref: "東京",address: "東京都千代田区"},
    {name: "関西学園",pref: "大阪",address: "大阪府"},
    
]

連想配列を準備すればID属性に合わせたデータが表示されるようになります。

IDに学校名を入れて、連想配列から検索するようにすれば、もっと汎用性が良くなると思います。