これが参考ページのジャバスクリプト↓↓↓
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>
