おぼえられないから

ただただ自分の覚え書きのためです。

個人的な覚書なので見ても役に立ちませんよ。

Javaを使わずにモーダルウィンドウが設置できる「pure-css-modal」
ウィンドウの表示方法もいくつか種類があるので自分のページにあったモーダルを設置できるのもいい
jQueryと違ってスクリプトのリンクを必要としないので比較的簡単に使える 

まずは公式ページのデモ画面をまとめたTHMLとCSSの
「pure-css-modal-master.zip」をダウンロード


参考ページ
今回はシンプルに画像をクリックすると画面の左右上下真ん中に表示するモーダルを設置

MTHL
<!--モーダルを開くトリガー-->
<label for="modal-trigger">モーダルが開きます</label>

<!--モーダルの内容-->
<div class="modal">
  <input id="modal-trigger" class="checkbox" type="checkbox">
  <div class="modal-overlay">
    <label for="modal-trigger" class="o-close"></label>
    <div class="modal-wrap a-center"> /*a-centerがウィンドウを中心に設置*/
      <label for="modal-trigger" class="close">&#10006;</label>
      <h2>モーダルのタイトル</h2>
      <p>テキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

カスタマイズ
複数設置したい場合はトリガーとモーダル内容の「modal-trigger」名前を揃える

クローズボタン設定
<label for="modal-trigger" class="close">&#10006;</label>
「&#10006;」は「×」の文字コード
画像にしたい場合は「&#10006;」の部分を変更

<h2>モーダルのタイトル</h2>
<p>テキストテキストテキストテキストテキスト</p> 
を<div></div>で囲うともっとわかりやすくなります。 

CSS
<head>に直接設置するか外部でリンク
デザインに合わせてカスタマイズする
/*
Pure CSS modal box
Author: Jorge Chavez
Github: http://github.com/jorgechavz
*/

.modal .checkbox{
  display: none;
}

/* Gray background ウィンドウの背景設定*/
.modal .modal-overlay{
  opacity: 0;
  transition: all 0.3s ease;
  width: 50%;
  position: absolute;
  width: 100%;
  height: 120%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  transform: scale(1);
  display: none;
  background-color: rgba(0,0,0,0.7);
}

/* Box モーダルウィンドウの設定*/
.modal .modal-wrap{
  background-color: #ddd;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  padding: 40px 50px;
  width: 60%;
  margin: 20px auto;
  align-self: flex-start;
  border-radius: 2px;
  transition: all 0.5s ease;
}

/* Box ウィンドウ上下左右中心の設定*/
.modal .modal-wrap.a-center {
  align-self: center;
}

/* Close button クローズボタンの文字コード設定*/
.modal .modal-overlay .close{
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 40px;
  width: 30px;
  height: 30px;
  color: #282c34;
}

.modal .modal-overlay .close:hover{
  cursor: pointer;
  color: #4b5361;
}

.modal .o-close {
   width: 100%;
   height: 100%;
   position: fixed;
   left: 0;
   top: 0;
   z-index: -100;
 }

.modal input:checked ~ .o-close {
  z-index: 9998;
}
.modal input:checked ~ .modal-overlay{
  transform: scale(1);
  opacity:1;
  z-index: 9997;
  overflow: auto;
  display: flex;
  animation-duration: 0.5s;
  animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: fade-in;
}
.modal input:checked ~ .modal-overlay .modal-wrap {
  transform: translateY(0);
  z-index: 9999;
}

/* Responsive Design */
.
.
.
.
以降はレスポンシブデザインのため今回は不要

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット