レスポンシブ対応の実装例&コード付き!異なるデザインパターンのポップアップウィンドウ(ボタンをクリックすると、画面下からポップアップウィンドウが出現し、3秒後に消える)を集めました!
HTML / CSS / JavaScript は記事後半に掲載していますので、ご自由にご利用ください。
シンプルポップアップ
シンプルで使いやすいポップアップウィンドウです。
カード風ポップアップ
カードのような見た目のポップアップウィンドウです。
グラデーションポップアップ
美しいグラデーションを使用したポップアップウィンドウです。
マジカルポップアップ
魔法のような複合アニメーション効果を持つポップアップウィンドウです。
ミニマルポップアップ
シンプルでミニマルなデザインのポップアップウィンドウです。
付箋風ポップアップ
付箋のような見た目のポップアップウィンドウです。
プレミアムポップアップ
高級感のあるデザインのポップアップウィンドウです。
ポップアップウィンドウとは?
ポップアップウィンドウは、ユーザーの操作に応じて新しく開く小さなブラウザウィンドウです。別ページの表示や補足情報の案内などに使われ、モーダルと違って背後の操作を制限しません。
目次
【1】シンプルポップアップ
<div class="container-1">
<div id="popup-container-1">
<button id="popup-btn-1">シンプル</button>
</div>
<div id="popup-1" class="popup-1">
<div class="popup-content-1">
<p>シンプルポップアップ</p>
<p>シンプルで使いやすいポップアップウィンドウです。</p>
</div>
</div>
</div>
.container-1 #popup-btn-1 {
cursor: pointer;
border: none;
padding: 12px 24px;
border-radius: 16px;
color: #333;
background-color: #eee;
font-weight: 600;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
width: 180px;
}
.container-1 #popup-btn-1:hover {
opacity: 0.5;
}
.container-1 .popup-1 {
position: fixed;
bottom: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
max-width: 90%;
max-height: 90%;
}
.container-1 .popup-1.active {
opacity: 1;
visibility: visible;
bottom: 20px;
transform: translateX(-50%);
animation: popupShowHide 3.4s ease forwards;
}
@keyframes popupShowHide {
0% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.container-1 .popup-content-1 {
background: white;
padding: 30px;
border-radius: 12px;
text-align: center;
position: relative;
min-width: 300px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 2px solid #007bff;
}
.container-1 .popup-content-1 p:first-child {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #007bff;
}
.container-1 .popup-content-1 p:last-of-type {
font-size: 16px;
color: #666;
margin-bottom: 25px;
line-height: 1.6;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container-1 .popup-content-1 {
padding: 20px;
min-width: 280px;
}
.container-1 .popup-content-1 p:first-child {
font-size: 20px;
}
.container-1 .popup-content-1 p:last-of-type {
font-size: 14px;
}
.container-1 #popup-btn-1 {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-1 .popup-content-1 {
padding: 15px;
min-width: 250px;
}
.container-1 .popup-content-1 p:first-child {
font-size: 18px;
}
.container-1 .popup-content-1 p:last-of-type {
font-size: 13px;
}
.container-1 #popup-btn-1 {
padding: 8px 16px;
font-size: 13px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// すべてのポップアップボタンを動的に検索
const popupButtons = document.querySelectorAll('[id^="popup-btn-"]');
popupButtons.forEach(function(button) {
// ボタンのIDからポップアップ番号を抽出
const buttonId = button.id;
const popupNumber = buttonId.replace('popup-btn-', '');
const popup = document.getElementById(`popup-${popupNumber}`);
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
});
});
【2】カード風ポップアップ
<div class="container-2">
<div id="popup-container-2">
<button id="popup-btn-2">カード風</button>
</div>
<div id="popup-2" class="popup-2">
<div class="popup-content-2">
<p>カード風ポップアップ</p>
<p>カードのような見た目のポップアップウィンドウです。</p>
</div>
</div>
</div>
.container-2 #popup-btn-2 {
cursor: pointer;
border: none;
padding: 12px 24px;
border-radius: 16px;
color: #333;
background-color: #eee;
font-weight: 600;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
width: 180px;
}
.container-2 #popup-btn-2:hover {
opacity: 0.5;
}
.container-2 .popup-2 {
position: fixed;
bottom: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
max-width: 90%;
max-height: 90%;
}
.container-2 .popup-2.active {
opacity: 1;
visibility: visible;
bottom: 20px;
transform: translateX(-50%);
animation: popupShowHide2 3.4s ease forwards;
}
@keyframes popupShowHide2 {
0% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.container-2 .popup-content-2 {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
padding: 30px;
border-radius: 20px;
text-align: center;
position: relative;
min-width: 300px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
transform: rotate(-1deg);
}
.container-2 .popup-content-2::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #28a745, #20c997);
border-radius: 22px;
z-index: -1;
opacity: 0.1;
}
.container-2 .popup-content-2 p:first-child {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #28a745;
text-shadow: 0 1px 2px rgba(40, 167, 69, 0.1);
}
.container-2 .popup-content-2 p:last-of-type {
font-size: 16px;
color: #666;
margin-bottom: 25px;
line-height: 1.6;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container-2 .popup-content-2 {
padding: 20px;
min-width: 280px;
}
.container-2 .popup-content-2 p:first-child {
font-size: 20px;
}
.container-2 .popup-content-2 p:last-of-type {
font-size: 14px;
}
.container-2 #popup-btn-2 {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-2 .popup-content-2 {
padding: 15px;
min-width: 250px;
}
.container-2 .popup-content-2 p:first-child {
font-size: 18px;
}
.container-2 .popup-content-2 p:last-of-type {
font-size: 13px;
}
.container-2 #popup-btn-2 {
padding: 8px 16px;
font-size: 13px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// すべてのポップアップボタンを動的に検索
const popupButtons = document.querySelectorAll('[id^="popup-btn-"]');
popupButtons.forEach(function(button) {
// ボタンのIDからポップアップ番号を抽出
const buttonId = button.id;
const popupNumber = buttonId.replace('popup-btn-', '');
const popup = document.getElementById(`popup-${popupNumber}`);
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
});
});
【3】ポップアップ
<div class="container-3">
<div id="popup-container-3">
<button id="popup-btn-3">グラデーション</button>
</div>
<div id="popup-3" class="popup-3">
<div class="popup-content-3">
<p>グラデーションポップアップ</p>
<p>美しいグラデーションを使用したポップアップウィンドウです。</p>
</div>
</div>
</div>
.container-3 #popup-btn-3 {
cursor: pointer;
border: none;
padding: 12px 24px;
border-radius: 16px;
color: #333;
background-color: #eee;
font-weight: 600;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
width: 180px;
}
.container-3 #popup-btn-3:hover {
opacity: 0.5;
}
.container-3 .popup-3 {
position: fixed;
bottom: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
max-width: 90%;
max-height: 90%;
}
.container-3 .popup-3.active {
opacity: 1;
visibility: visible;
bottom: 20px;
transform: translateX(-50%);
animation: popupShowHide3 3.4s ease forwards;
}
@keyframes popupShowHide3 {
0% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.container-3 .popup-content-3 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px;
border-radius: 12px;
text-align: center;
position: relative;
min-width: 300px;
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
color: white;
border: 3px solid rgba(255, 255, 255, 0.2);
}
.container-3 .popup-content-3::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
border-radius: 12px;
pointer-events: none;
}
.container-3 .popup-content-3 p:first-child {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.container-3 .popup-content-3 p:last-of-type {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 25px;
line-height: 1.6;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container-3 .popup-content-3 {
padding: 20px;
min-width: 280px;
}
.container-3 .popup-content-3 p:first-child {
font-size: 20px;
}
.container-3 .popup-content-3 p:last-of-type {
font-size: 14px;
}
.container-3 #popup-btn-3 {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-3 .popup-content-3 {
padding: 15px;
min-width: 250px;
}
.container-3 .popup-content-3 p:first-child {
font-size: 18px;
}
.container-3 .popup-content-3 p:last-of-type {
font-size: 13px;
}
.container-3 #popup-btn-3 {
padding: 8px 16px;
font-size: 13px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// すべてのポップアップボタンを動的に検索
const popupButtons = document.querySelectorAll('[id^="popup-btn-"]');
popupButtons.forEach(function(button) {
// ボタンのIDからポップアップ番号を抽出
const buttonId = button.id;
const popupNumber = buttonId.replace('popup-btn-', '');
const popup = document.getElementById(`popup-${popupNumber}`);
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
});
});
【4】マジカルポップアップ
<div class="container-4">
<div id="popup-container-4">
<button id="popup-btn-4">マジカル</button>
</div>
<div id="popup-4" class="popup-4">
<div class="popup-content-4">
<p>マジカルポップアップ</p>
<p>魔法のような複合アニメーション効果を持つポップアップウィンドウです。</p>
</div>
</div>
</div>
.container-4 #popup-btn-4 {
cursor: pointer;
border: none;
padding: 12px 24px;
border-radius: 16px;
color: #333;
background-color: #eee;
font-weight: 600;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
width: 180px;
}
.container-4 #popup-btn-4:hover {
opacity: 0.5;
}
.container-4 .popup-4 {
position: fixed;
bottom: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
max-width: 90%;
max-height: 90%;
}
.container-4 .popup-4.active {
opacity: 1;
visibility: visible;
bottom: 20px;
transform: translateX(-50%);
animation: popupShowHide4 3.4s ease forwards;
}
@keyframes popupShowHide4 {
0% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.container-4 .popup-content-4 {
background: white;
padding: 30px;
border-radius: 12px;
text-align: center;
position: relative;
min-width: 300px;
box-shadow: 0 25px 50px rgba(111, 66, 193, 0.2);
border: 2px solid #6f42c1;
animation: glow 2s ease-in-out infinite alternate, float 3s ease-in-out infinite;
overflow: hidden;
}
@keyframes glow {
from {
box-shadow: 0 25px 50px rgba(111, 66, 193, 0.2);
}
to {
box-shadow: 0 25px 50px rgba(111, 66, 193, 0.4), 0 0 20px rgba(111, 66, 193, 0.3);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
.container-4 .popup-content-4::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(111, 66, 193, 0.1), transparent, rgba(111, 66, 193, 0.1), transparent);
animation: rotate 4s linear infinite;
z-index: -1;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container-4 .popup-content-4::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(111, 66, 193, 0.05) 50%, transparent 70%);
animation: shimmer 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.container-4 .popup-content-4 p:first-child {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #6f42c1;
animation: textGlow 2s ease-in-out infinite alternate, bounce 2s ease-in-out infinite;
position: relative;
}
@keyframes textGlow {
from {
text-shadow: 0 0 5px rgba(111, 66, 193, 0.3);
}
to {
text-shadow: 0 0 10px rgba(111, 66, 193, 0.6), 0 0 20px rgba(111, 66, 193, 0.4);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
.container-4 .popup-content-4 p:last-of-type {
font-size: 16px;
color: #666;
margin-bottom: 25px;
line-height: 1.6;
animation: fadeInOut 3s ease-in-out infinite;
}
@keyframes fadeInOut {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container-4 .popup-content-4 {
padding: 20px;
min-width: 280px;
}
.container-4 .popup-content-4 p:first-child {
font-size: 20px;
}
.container-4 .popup-content-4 p:last-of-type {
font-size: 14px;
}
.container-4 #popup-btn-4 {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-4 .popup-content-4 {
padding: 15px;
min-width: 250px;
}
.container-4 .popup-content-4 p:first-child {
font-size: 18px;
}
.container-4 .popup-content-4 p:last-of-type {
font-size: 13px;
}
.container-4 #popup-btn-4 {
padding: 8px 16px;
font-size: 13px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// すべてのポップアップボタンを動的に検索
const popupButtons = document.querySelectorAll('[id^="popup-btn-"]');
popupButtons.forEach(function(button) {
// ボタンのIDからポップアップ番号を抽出
const buttonId = button.id;
const popupNumber = buttonId.replace('popup-btn-', '');
const popup = document.getElementById(`popup-${popupNumber}`);
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
});
});
【5】ミニマルポップアップ
<div class="container-5">
<div id="popup-container-5">
<button id="popup-btn-5">ミニマル</button>
</div>
<div id="popup-5" class="popup-5">
<div class="popup-content-5">
<p>ミニマルポップアップ</p>
<p>シンプルでミニマルなデザインのポップアップウィンドウです。</p>
</div>
</div>
</div>
.container-5 #popup-btn-5 {
cursor: pointer;
border: none;
padding: 12px 24px;
border-radius: 16px;
color: #333;
background-color: #eee;
font-weight: 600;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
width: 180px;
}
.container-5 #popup-btn-5:hover {
opacity: 0.5;
}
.container-5 .popup-5 {
position: fixed;
bottom: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
max-width: 90%;
max-height: 90%;
}
.container-5 .popup-5.active {
opacity: 1;
visibility: visible;
bottom: 20px;
transform: translateX(-50%);
animation: popupShowHide5 3.4s ease forwards;
}
@keyframes popupShowHide5 {
0% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.container-5 .popup-content-5 {
background: #ffffff;
padding: 25px;
border-radius: 4px;
text-align: center;
position: relative;
min-width: 300px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container-5 .popup-content-5 p:first-child {
font-size: 18px;
font-weight: 400;
margin-bottom: 15px;
color: #495057;
letter-spacing: 0.5px;
}
.container-5 .popup-content-5 p:last-of-type {
font-size: 14px;
color: #868e96;
margin-bottom: 25px;
line-height: 1.5;
font-weight: 300;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container-5 .popup-content-5 {
padding: 20px;
min-width: 280px;
}
.container-5 .popup-content-5 p:first-child {
font-size: 16px;
}
.container-5 .popup-content-5 p:last-of-type {
font-size: 13px;
}
.container-5 #popup-btn-5 {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-5 .popup-content-5 {
padding: 15px;
min-width: 250px;
}
.container-5 .popup-content-5 p:first-child {
font-size: 15px;
}
.container-5 .popup-content-5 p:last-of-type {
font-size: 12px;
}
.container-5 #popup-btn-5 {
padding: 8px 16px;
font-size: 13px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// すべてのポップアップボタンを動的に検索
const popupButtons = document.querySelectorAll('[id^="popup-btn-"]');
popupButtons.forEach(function(button) {
// ボタンのIDからポップアップ番号を抽出
const buttonId = button.id;
const popupNumber = buttonId.replace('popup-btn-', '');
const popup = document.getElementById(`popup-${popupNumber}`);
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
});
});
【6】付箋風ポップアップ
<div class="container-6">
<div id="popup-container-6">
<button id="popup-btn-6">付箋風</button>
</div>
<div id="popup-6" class="popup-6">
<div class="popup-content-6">
<p>付箋風ポップアップ</p>
<p>付箋のような見た目のポップアップウィンドウです。</p>
</div>
</div>
</div>
.container-6 #popup-btn-6 {
cursor: pointer;
border: none;
padding: 12px 24px;
border-radius: 16px;
color: #333;
background-color: #eee;
font-weight: 600;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
width: 180px;
}
.container-6 #popup-btn-6:hover {
opacity: 0.5;
}
.container-6 .popup-6 {
position: fixed;
bottom: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
max-width: 90%;
max-height: 90%;
}
.container-6 .popup-6.active {
opacity: 1;
visibility: visible;
bottom: 20px;
transform: translateX(-50%);
animation: popupShowHide6 3.4s ease forwards;
}
@keyframes popupShowHide6 {
0% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.container-6 .popup-content-6 {
background: #ffffff;
padding: 30px;
border-radius: 0;
text-align: center;
position: relative;
min-width: 300px;
box-shadow: 0 20px 60px rgba(23, 162, 184, 0.15);
border-left: 4px solid #17a2b8;
transform: rotate(-2deg);
}
.container-6 .popup-content-6::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #17a2b8 transparent transparent transparent;
}
.container-6 .popup-content-6 p:first-child {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #17a2b8;
font-family: 'Courier New', monospace;
}
.container-6 .popup-content-6 p:last-of-type {
font-size: 16px;
color: #666;
margin-bottom: 25px;
line-height: 1.6;
font-family: 'Courier New', monospace;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container-6 .popup-content-6 {
padding: 20px;
min-width: 280px;
}
.container-6 .popup-content-6 p:first-child {
font-size: 20px;
}
.container-6 .popup-content-6 p:last-of-type {
font-size: 14px;
}
.container-6 #popup-btn-6 {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-6 .popup-content-6 {
padding: 15px;
min-width: 250px;
}
.container-6 .popup-content-6 p:first-child {
font-size: 18px;
}
.container-6 .popup-content-6 p:last-of-type {
font-size: 13px;
}
.container-6 #popup-btn-6 {
padding: 8px 16px;
font-size: 13px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// すべてのポップアップボタンを動的に検索
const popupButtons = document.querySelectorAll('[id^="popup-btn-"]');
popupButtons.forEach(function(button) {
// ボタンのIDからポップアップ番号を抽出
const buttonId = button.id;
const popupNumber = buttonId.replace('popup-btn-', '');
const popup = document.getElementById(`popup-${popupNumber}`);
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
});
});
【7】プレミアムポップアップ
<div class="container-7">
<div id="popup-container-7">
<button id="popup-btn-7">プレミアム</button>
</div>
<div id="popup-7" class="popup-7">
<div class="popup-content-7">
<p>プレミアムポップアップ</p>
<p>高級感のあるデザインのポップアップウィンドウです。</p>
</div>
</div>
</div>
.container-7 #popup-btn-7 {
cursor: pointer;
border: none;
padding: 12px 24px;
border-radius: 16px;
color: #333;
background-color: #eee;
font-weight: 600;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
display: block;
margin: 0 auto;
width: 180px;
}
.container-7 #popup-btn-7:hover {
opacity: 0.5;
}
.container-7 .popup-7 {
position: fixed;
bottom: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
max-width: 90%;
max-height: 90%;
}
.container-7 .popup-7.active {
opacity: 1;
visibility: visible;
bottom: 20px;
transform: translateX(-50%);
animation: popupShowHide7 3.4s ease forwards;
}
@keyframes popupShowHide7 {
0% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%);
}
}
.container-7 .popup-content-7 {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
padding: 30px;
border-radius: 20px;
text-align: center;
position: relative;
min-width: 300px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
border: 2px solid #ffd700;
overflow: hidden;
}
.container-7 .popup-content-7::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
}
.container-7 .popup-content-7 p:first-child {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.container-7 .popup-content-7 p:last-of-type {
font-size: 16px;
color: #666;
margin-bottom: 25px;
line-height: 1.6;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.container-7 .popup-content-7 {
padding: 20px;
min-width: 280px;
}
.container-7 .popup-content-7 p:first-child {
font-size: 20px;
}
.container-7 .popup-content-7 p:last-of-type {
font-size: 14px;
}
.container-7 #popup-btn-7 {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.container-7 .popup-content-7 {
padding: 15px;
min-width: 250px;
}
.container-7 .popup-content-7 p:first-child {
font-size: 18px;
}
.container-7 .popup-content-7 p:last-of-type {
font-size: 13px;
}
.container-7 #popup-btn-7 {
padding: 8px 16px;
font-size: 13px;
}
}
document.addEventListener('DOMContentLoaded', function() {
// すべてのポップアップボタンを動的に検索
const popupButtons = document.querySelectorAll('[id^="popup-btn-"]');
popupButtons.forEach(function(button) {
// ボタンのIDからポップアップ番号を抽出
const buttonId = button.id;
const popupNumber = buttonId.replace('popup-btn-', '');
const popup = document.getElementById(`popup-${popupNumber}`);
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
});
});