BLOG

脱jQueryで簡単モーダル!プラグインもなし!コピペOK!

| JavaScript

脱jQueryが進んでいる昨今、
モーダルのプラグインとかを使うとjQueryを使うのが多くて嫌になっちゃうよね。
ってなことで、脱jQueryのモーダルってことで
簡単なJSでやっちゃおうってことです。
CSSはもう、好きにしてもろてですね。
HTMLとJavascriptに関してはこんな感じですかね。

<button id='openBtn'>OPEN</button>

<div id="modalArea">
  <div id="overlay"></div>
  <div id="stage">
   <div id="closeBtn">x</div>
   <div id="text">
     テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
   </div>
  </div>
</div>

必須のCSSを忘れてたので記載

#modalArea{
  visibility: hidden;
  opacity: 0;
  transition: all .4s;
}

.is-show{
  visibility: visible;
  opacity: 1;
}

非表示なのを表示にする感じっすね。
表示位置とか見た目とかはお好きにどうぞぞ。
visibilityで消してるとそこにあると、存在みたいなのがない透明人間みたいなイメージになるみたい。
displayでするとなんかうまくいきやせん。

(function(){
  const openbtn   = document.getElementById('openBtn');
  const modalArea = document.getElementById('modalArea');
  const overlay   = document.getElementById('overlay');
  const closeBtn  = document.getElementById('closeBtn');
  const toggle    = [openbtn, overlay, closeBtn];

  toggle.forEach(function(elm){
    elm.addEventListener('click', function(){
      modalArea.classList.toggle('is-show');
    }, false);
  });
}());

さて Javascriptですが、上の4行で[‘開くボタン’, ‘モーダル’, ‘後ろの黒いの’, ‘閉じるボタン’]要素を取得して
5行目で、クリックすると開く閉じるの判定の要素を配列として打ち込む

それ以降は、配列に打ち込んだ要素をクリックしたら「モーダル」にis-showのクラスをつけたり消したりするって感じです。
ほぼほぼ、コピペで使えますね。
もう、これのが簡単で、プラグイン使わないようになりました。

RECENT POSTS

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP