数秒後に出現するポップアップを作ってみた

スポンサーリンク
css

サイト表示から数秒後にポップアップが表示されるようなプログラミング学習のサイトや、ファッションサイトをよく見かけるので、作ってみました。

完成品

今回は2秒後にポップアップが固定位置で表示されるものを作りました。

See the Pen
Show popup after few seconds
by Seiya Takahashi (@takasei)
on CodePen.

HTML

<div class="popup">
  <div class="box-content">
    <div class="close"></div>
      <div class="box-content-img">
        <img src="https://drive.google.com/uc?export=view&id=1stjmZw5ZL-x05VQ0v2_dHaNGzmMAbq4v">
      </div>
    <div class="text-content">
      <div>
        <h3>限定オファー</h3>
        <h2>80%<span> off</span></h2>
        <p>対象商品が最大80%off!</p>
        <a href=#>対象商品一覧はこちら</a>
      </div>
    </div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');

{
  padding:0;
  margin:0;
  box-sizing:border-box;
  font-family: 'Quicksand', sans-serif;
}

body{
/*   min-height:100vh; */
  height:800px;
  background: #ed8a63;
}

.popup{
  position:fixed;
  top:25%;
  left:25%;
  display:none;
}

.box-content{
  position:relative;
  width:600px;
  height:400px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 5px 15px;
  display:flex;
}

.box-content .box-content-img{
 position:relative;
 width:300px;
 height:400px;
 display:flex;
 justifi-content:center;
 align-items:center;
}

.box-content .box-content-img img{
  position:relative;
  max-height:250px;
  margin-left:20px;
}

.box-content .text-content{
 position:relative;
 width:300px;
 height:400px;
 display:flex;
 justifi-content:center;
 align-items:center;
}

.box-content .text-content h3{
  line-height:1px;
  font-size:25px;
  font-weight:300;
  color:#000;
}

.box-content .text-content h2{
  color:#ff4d54;
  font-size:50px;
  line-height:3px;
}

.box-content .text-content span{
  color:#000;
  font-size:30px;
}

.box-content .text-content p{
  font-weight:300;
}

.box-content .text-content a{
  display:inline-block;
  padding: 10px 20px;
  background:#ff4d54;
  color:#fff;
  margin-top:10px;
  border-radius:10px;
  text-decoration:none;
}

.close{
  cursor:pointer;
  position:absolute;
  top:25px;
  right:15px;
  width:40px;
  height:40px;
  background:#fff url(https://drive.google.com/uc?export=view&id=1ykG6zgLKYlv9sJr1YovsjLezn3MjZXkT); 
  background-repeat:no-repeat;
  background-size:20px;
  z-index:2;
}

JS

const popup = document.querySelector('.popup');
const close = document.querySelector('.close');

window.onload = function(){
  setTimeout(function(){
    popup.style.display = "block"
  },2000)
}

close.addEventListener('click',() => {
    popup.style.display = "none"
})

解説

pointは以下です。

  1. position fixedでポップアップ表示位置は固定
  2. displayの要素でポップアップの表示/非表示を制御
  3. window.onloadでページ読み込みが完了して数秒後にポップアップ表示を行うように実装

1. position fixedでポップアップ表示位置は固定

popupクラスに対して、position:fixed;を設定することで、スクロールした場合も表示位置を固定することができます。

CSS

.popup{
  position:fixed;
}

ちょっとわかりづらいかもですが、こちらを設定しないと以下のようにスクロール時に動いてしまいます。

2. displayの要素でポップアップの表示/非表示を制御

popupの表示/非表示の制御はJavaScriptでイベントごとにdisplayの要素の変更を行うことで実現しました。

具体的には、以下実装しています。

1. ページ読み込み数秒後にdisplayをblockにする
    popup.style.display = "block"
2. ポップアップ内の閉じるマーク押下でdisplayをnoneにする
    popup.style.display = "none"

3. ページ読み込みが完了して数秒後にポップアップ表示を行うように実装

最後にページ読み込み数秒後にポップアップを表示させるために、以下をそれぞれ実装しました。

1. ページ読み込み完了後にイベント発生
→window.onload を使用
2. 数秒後にポップアップ表示
→window.setTimeoutを使用

それぞれの記述方法は以下です。

①window.onload
window.onload = function(){ ここにページ読み込み後に発生させないイベント内容を記述 }

②window.setTimeout
setTimeout(function(){ スタイルの変更をここに記述 }, 開始時刻)

この実装でページ表示→2秒後にポップアップ表示が実現できました。

終わりに

作ってみたは良いものの、中身が胡散臭いファッションサイトのポップアップぽい。。
読んでいただきありがとうございました!

css
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました