【web】リンククリックでモーダルを表示させる!

最近このブログのタガタメ(ソーシャルゲーム)化がぐんぐん進んでおりますが、
自身の勉強のためにもたまにはwebのことなんかを。
日々の業務でも勉強になることはありますが、
やはり自分で書かなければ。。
どんどん忘れてってしまうので、書き残しておくこととします。

リンククリックでモーダルを表示する

これはTwitterでフォロワーさんがwebの勉強をしているようで、
知りたいとのことでしたので、
もしかしたら他の人にも需要あるのかも?ということで書いてみようと思ったのがきっかけです。
他にもたくさんの方が似たような記事を書いているので、
圧倒的に埋もれる感満載ですが、
まあ少しでも誰かの役に立てば。
そもそもクソコードすぎて見てられないかもしれませんがw

今回はhtml,css,jsを用意します。

まずはhtmlを用意します。
今回こちらではリンクを用意してあげるだけとします。
※cssやjsへのリンク、参照は省略させていただきます。

  <div class="container">
    <a href="#" class="modal_open link">モーダルを開きます</a>
  </div>

本当に簡単なリンクです。

次にcss。

.container {
  padding: 40px;
  width: 100%;
}

.link {
  color: #ff8025;
  font-size: 12px;
}
.link:hover {
  color: #ffa769;
}

カラーを当てたりスタイルを調節してるだけなので、無視しても大丈夫です。

html側へmodalを書き足します。

 <div class="container">
   <a href="#" class="modal_open link">モーダルを開きます</a>
 </div>
 <div class="modal">
   <p class="modal_title">modal title</p>
   <p class="modal_text">
     モーダルのテキストが表示されます。
   </p>
 </div>

これでモーダルの準備ができました。
ただこのままだとリンクの下に白い枠に囲まれたテキストがあるだけになってしまいます。

modal_practice01

現在はこんな感じになります。

まずはこれをcssで非表示にします。

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.container {
  padding: 40px;
  height: 100%;
  width: 100%;
  /* add style */
  position: relative;
}

.link {
  color: #ff8025;
  font-size: 12px;
}
.link:hover {
  color: #ffa769;
}


/* modal style */
.modal {
  display: none;
  border: 1px solid #dddddd;
  padding: 20px;
  width: 400px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333333;
}
.modal_text {
  font-size: 12px;
  color: #404040;
}

これでモーダルは消えました。

ここで押さえて起きたいのは
positionの使い方です。
containerにposition: relativeが追加されているのと
modalにposition: absoluteがついていることに注目してください。
modalについているposition: absoluteは要素を絶対配置するものです。
それの基準を示しているのがposition: relativeです。
親要素にposition: relativeを指定してあげることで、子要素のabsoluteくんは
どこを基準にすれば良いかがわかるんですねー。
わからなければ

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

ここについては無視しても構わないですが、
これはposition: absoluteとセットにすることで要素を縦横中央揃えするおまじないくらいに思ってもらえればOKです。

さて、それではようやくjsの出番です。

jsでやることとしては、
modalクラスがついているDOMに対して、クラスの着脱をするくらいです。

// modal_open クラスがついた要素を取得
var link = document.getElementsByClassName('modal_open')[0];
// modal classがついた要素を取得
var modal = document.getElementsByClassName('modal')[0];

// link押下時にクリックイベントを発火させる
link.addEventListener('click', function(e){
  if (!modal.classList.contains('show')){
    // modalクラスが付いている要素に表示させるクラスを追加
    modal.classList.add('show');
  } else {
    // modalクラスが付いている要素から表示させるクラスを削除
    modal.classList.remove('show');
  }
  e.preventDefault();
});

これで
・リンクを押下して、モーダルを表示させる。
・リンクを押下して、モーダルを閉じる。
上記2つの処理ができました。

あとはcssに表示用のクラス(ここではshowというクラスを追加します。)

(略)

.modal {
  display: none;
  border: 1px solid #dddddd;
  padding: 20px;
  width: 400px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal_title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333333;
}
.modal_text {
  font-size: 12px;
  color: #404040;
}
.modal.show {
  display: block;
}

以上で完成です。
モーダルを表示してみるとこんな感じになると思います。

modal_practice02

でもまってください。
こんなモーダルありませんよね?
大体のモーダルは背景が存在していて、
それをクリックすると閉じたりします。
その機能を実装してみましょう。

<div class="modal">
中略
</div">

<div class="modal_overlay"></div">

上記のコードをhtmlに書き加えます。

cssにoverlay用のスタイルを追加します。

.modal {
  display: none;
  border: 1px solid #dddddd;
  padding: 20px;
  width: 400px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.modal_overlay {
  background: transparent;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9;
}

中略

.modal.show, .modal_overlay.show {
  display: block;
}

jsに背景の操作を加えます。
具体的には
・モーダルが開いたときに背景も表示する
・背景をクリックしたときにモーダルからshowクラスを削除する

// modal_open クラスがついた要素を取得
var link = document.getElementsByClassName('modal_open')[0];
// modal classがついた要素を取得
var modal = document.getElementsByClassName('modal')[0];
// modal_overlay classがついた要素を取得
var overlay = document.getElementsByClassName('modal_overlay')[0];

// link押下時にクリックイベントを発火させる
link.addEventListener('click', function(e){
  if (!modal.classList.contains('show')){
    // modalクラスが付いている要素に表示させるクラスを追加
    modal.classList.add('show');
    overlay.classList.add('show');
  }

  e.preventDefault();
});

overlay.addEventListener('click', function() {
  if (modal.classList.contains('show')) {
    modal.classList.remove('show');
    this.classList.remove('show');
  }
})

背景クリックでモーダルを閉じるようにした代わりに、
リンククリックでクラスを削除している部分を無くしています。

完成コードはこちらで確認できます。

まとめ

個人的にはこんなにしっかりコードを使って書くのは初めてだったので、
色々調べながらでしたw
難しいけど、楽しかったので、もう少し学んだら色々と書いてみようかなと思いました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です