jqueryなしでjavascriptでpopup実装

クリックしたら出てくるポップアップを作りたかったのですが、jqueryのものばかりだったのでjavascriptのみで作るpopupをまとめました。あまり依存を増やしたくないからjqueryを入れたくないという方向け。

やりたいこと

やりたいことは下記

• rails
• javascriptのみ
• webpacker経由
• popupは複数ある前提でクリックした箇所によって個別のpopupを出し分ける

実装内容

コードの全体像は下記

javascript側

/* ポップアップを開く */
function popup_open(popup_name) {
  var popup = document.getElementById(popup_name);
  popup.style.display ="block";
}

/* ポップアップを閉じる */
function popup_close(popup_name) {
  var popup = document.getElementById(popup_name);
  popup.style.display ="none";
}

window.popup_open = popup_open;
window.popup_close = popup_close;

html側

              <a href="javascript:popup_open('twitter_link_chip_popup_overlay');">
                <div class="link_chip_wrap">
                  <div class="link_chip_icon">
                    <img src="<%= asset_path('twitter_icon.svg') %>"/>
                  </div>
                  <div class="link_chip_text">
                    Twitter
                  </div>
                </div>
              </a>
<!-- ポップアップ -->
<div id="twitter_link_chip_popup_overlay">
  <div class="popup-window">
    <div class="popup-header">
      <div class="popup-close">
        <a href="javascript:popup_close('twitter_link_chip_popup_overlay');">✖️       </a>
      </div>
    </div>
  </div>
</div>

やっていることは下記

• htmlのaリンクをクリックしたらjavascriptのpopup_openが発火。webpacker経由の場合、html側にイベント発火を書かないとうまく動かない
• popup_nameを引数にし、対象のpopupを指定。対象のpopupはidにて指定
• styleからdisplayを取ってきてそこをnoneにしたり、blockにしたりして出したり消したりする