モーダルウィンドウ「CSS」ナナヨ マニュアル

  /* モーダルウィンドウ非表示 */
  .myModal_popUp {
    display: none;
  }

  /* ボタン ---------------------------------------------- */
  /* ラジオボタン非表示 */
  input[name=myModal_switch] {
    display: none;
  }

  /* ラベルの非表示 */
  #myModal_open + label ~ label {
    display: none;
  }

  /* モーダルウィンドウ ------------------------------------- */
  /* ラジオボタンをチェックでポップアップを表示 */
  #myModal_open:checked + label ~ .myModal_popUp {
    display: block;/*表示*/
    left: 50%;/*ボックスの始点を画面中央へ*/
    top: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%,-50%);/*Ｘ軸Ｙ軸ともに50％ずらしてボックス自体を画面の中央に配置*/
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    z-index: 99998;/*重ねる*/
    position: fixed;/*位置を固定*/
    background: #fff;
  }

  /*モーダル本文 */
  #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
    -webkit-overflow-scrolling:touch;
    overflow-y: auto;
    width: calc(100% - 5px);/*左右パディングを引く*/
    height: calc(100% - 5px - 10px );/*上下パディング*/
    padding: 10px 20px;
  }

  /* 薄暗い背景 */
  #myModal_open:checked + label + #myModal_close-overlay + label {
    background: rgba(0, 0, 0, 0.70);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    color: #fff;
    z-index: 99997;
    position: fixed;
}

  /* ★閉じるボタン */
  #myModal_open:checked ~ #myModal_close-button + label {
    width: 40%;
    height: 44px;
    text-align: center;
    font-size: 25px;
    line-height: 44px;
    bottom: 20%;
    left: 25%;
    background: #fff;
    display: block;
    z-index: 99999;
    position: fixed;
}
  /*PC表記の時は「×」*/
  #myModal_open:checked ~ #myModal_close-button + label::before {
    content: '×';
    font-family: fontawesome;
  }
    /*MO表記の時はクリックしやすく「CLOSE」*/
  #myModal_open:checked ~ #myModal_close-button + label::after {
    content: 'CLOSE';
    font-family: fontawesome;
    margin-left: 5px;
    font-size: 80%;
  }

  /* モーダル表示のフェードインアニメーション */
  .myModal_popUp {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
  }
  #myModal_open:checked ~ #myModal_close-button + label{
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
  }
  @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  @-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  /*ボタンの装飾--------------*/
  /*ボタン共通*/
  #myModal_open + label,
  #myModal_open:checked ~ #myModal_close-button + label {
    background: #ffc107;
    color: #fff;
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    transition: .3s ;
  }
  #myModal_open + label:hover,
  #myModal_open:checked ~ #myModal_close-button + label:hover {
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
  }
  /*開くボタン*/
  #myModal_open + label {  
    width: 100px;
    margin: 0 auto;
    padding: 5px 10px;
    text-align: center;
    display: block;
    letter-spacing: 3px;
    font-weight: bold;
  }

  /*閉じるボタン*/
  #myModal_open:checked ~ #myModal_close-button + label::before {
    content: '\f00d';
    font-family: fontawesome;
    margin-right: 5px;
  }

  /* スクリーンサイズが768px以上の場合に適用 ここから */
  @media (min-width: 768px) {
    /* モーダルウィンドウの背景ボックスの大きさ */
    #myModal_open:checked + label ~ .myModal_popUp {
      width: 400px;
      height: 400px;
    }
    /*モーダル本文*/
    #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
      height: calc(100% - 5px);/*上下*/
    }
    /* 閉じるボタンの位置と大きさ */
    #myModal_open:checked ~ #myModal_close-button + label {
      left: 50%;
      top: 60%;
      margin-left: 200px;
      margin-top: -290px;
      width: 44px;
      height: 44px;
    }
    #myModal_open:checked ~ #myModal_close-button + label::after {
      display: none;
    }
  }
  /* スクリーンサイズが768px以上の場合に適用 ここまで*/