2020年6月3日水曜日

JavaScripで自動でポップアップ画面（モーダル）を出す方法




https://tech-dig.jp/js-modal/を参考に

これが参考ページのジャバスクリプト↓↓↓
bodyタグの中にそのまま貼り付けたらOK

<style type="text/css">
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}
</style>

<br />
<div class="popup" id="js-popup">
<div class="popup-inner">
<div class="close-btn" id="js-close-btn">
<i class="fas fa-times"></i></div>
<a href="https://www.blogger.com/blogger.g?blogID=1547633731491899215#"><img alt="ポップアップ画像" src="./img/popup.jpg" /></a>
  </div>
<div class="black-background" id="js-black-bg">
</div>
</div>
<script type="text/javascript"><!--
window.onload = function() {
  var popup = document.getElementById('js-popup');
//  if(!popup) return;
//  popup.classList.add('is-show');

//  var blackBg = document.getElementById('js-black-bg');
//  var closeBtn = document.getElementById('js-close-btn');

//  closePopUp(blackBg);
//  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}

// -->
</script>

ポップアップ画面をクリックや閉じるボタンで閉じないようにした↓↓↓

<style type="text/css">
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1;
  cursor: pointer;
}
</style>

<br />
<div class="popup" id="js-popup">
<div class="popup-inner">
<div class="" id="js-close-btn">
<i class=""></i></div>
ポップアップのテキスト表示エリア<br />
<br />
<a href="https://6bitamemo.blogspot.com/2020/06/google.html">ポップアップのテキスト表示エリアのリンク設置</a>
  </div>
<div class="black-background" id="js-black-bg">
</div>
</div>
<script type="text/javascript"><!--
window.onload = function() {

  var popup = document.getElementById('js-popup');
  if(!popup) return;
  popup.classList.add('is-show');


}

// -->
</script>

これを削除した↓↓↓クローズボタン出力と背景をクリックされたら閉じるソースなので削除した

//  var blackBg = document.getElementById('js-black-bg');
//  var closeBtn = document.getElementById('js-close-btn');
//  closePopUp(blackBg);
//  closePopUp(closeBtn);
  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }

背景も真っ黒にしたかったので

.black-backgroundの

background-color: rgba(0,0,0,.8);をbackground-color: black;に変更

それと×ボタン（閉じるボタン）を消したかったので

<div class="close-btn" id="js-close-btn">
<i class="fas fa-times"></i></div>

のclassとidを下記のように削除

<div class="" id="js-close-btn">
<i class=""></i></div>

結果↓↓↓　これを貼るだけでおｋ（URLは変更）

<style type="text/css">

/* test */

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1;
  cursor: pointer;
}
</style>

<br />
<div class="popup" id="js-popup">
<div class="popup-inner">
<div class="" id="js-close-btn">
<i class=""></i></div>
ブログを引越ししました<br />
<br />
<a href="https://6bitamemo.blogspot.com/2020/06/google.html">引っ越し先はコチラをクリック</a>
  </div>
<div class="black-background" id="js-black-bg">
</div>
</div>
<script type="text/javascript"><!--
window.onload = function() {

//コメントテスト

  var popup = document.getElementById('js-popup');
  if(!popup) return;
  popup.classList.add('is-show');


}

// -->
</script>
時刻: