チェックボックス ポップアップ

by interlife

HTML

<div>
  <label for="select_popupOpen" class="btn_area">
    クリックすると開きます
  </label>
  <input type="checkbox" id="select_popupOpen">
  <div class="js_popup1 popup">
    <div class="popupPlate">
      <div class="text_area">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <label for="select_popupOpen" class="popupClose">閉じます</label>
    </div>
    <label for="select_popupOpen" class="popupBgi"></label>
  </div>
</div>

SCSS

//POPUP
.popup { 
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; 
  background: rgba(0,0,0,.6);
  //初期
  opacity:0; z-index: -2; transition: opacity 0s;
  //クリックされたら
  &.open { opacity: 1;  z-index: 90; transition: opacity 0.2s; }
  //背景
  .popupBgi { 
    position: absolute; top: 0; left: 0; z-index: 80; 
    width: 100%; height: 100%;
  }
  //POPUPの中身（ここは自由に）
  .popupPlate {
    margin: 0 auto;
    padding: 4.6875% 6.25%;  
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 90%; max-width: 1000px;
    background: #fff; text-align: center;
    //閉じるボタン
    .popupClose { 
      padding: .5em 1em;
      border: solid 1px #fff;
      display: inline-block; 
      position: absolute; bottom: 0; left: 50%;
      transform: translate( -50%,150%);
      background: rgba(#000,.5);
      color: #fff;
      text-align: center; 
      cursor: pointer;
      &:hover { opacity: .7; }
    }
  }
}


//チェックボックスで実装
#select_popupOpen:checked {
  &+.popup {
    opacity: 1;  z-index: 90; transition: opacity 0.2s;
    label { display: block; }
  }
}



//装飾
.btn_area{
  margin: 1em 0;
  padding: 1em 2em;
  display: inline-block;
  background: #5f36b1;
  color: #fff;
  border-radius: 5px;
}
.text_area{
  margin: auto;
  padding: 1em;
  background: #e5dff0;
  max-width: 800px;
}