画面の上にボタンのある子画面が出るjQuery モーダル

2023年05月28日2023年06月04日

広告等でよく使われるjQuery

これが動くURLこちら

タップで読みたいところにジャンプします

使用したJQuery

hide()
click()

fadeIn()
fadeOut()

jQuery のコード

$(function () {
　// ポップアップを隠す
　$('.popBg').hide();
　$('.showAlert__btn').click(function () {
　　$('.popBg').fadeIn(300);
　})
　$('.popBg__btn').click(function () {
　　$('.popBg').fadeOut(300);
　})
});

HTMLのコード

<div class="showAlert">
  <div class="showAlert__base">
    <p class="showAlert__note">
      WARNING!!
    </p>
    <button class="btn showAlert__btn">
      押したらだめだよ
    </button>
  </div>
  <div class="showAlert__popBg popBg">
    <div class="showAlert__wrapperPop">
      <p class="showAlert__note">
        押したらだめっていったやん
      </p>
      <button class="btn popBg__btn">なんでだよ</button>
    </div>
  </div>
</div>

CSS のコード

.showAlert {
  height: 60vh;
  background-color: variable.$bright5_color;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  &__note,
  .wrapperPop__note {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &__popBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1);
  }

  &__wrapperPop {
    width: 50%;
    margin: 0 auto;
    padding: 3%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}