Information Popup
An information display popup with a clean and modern design.
HTML
<div class="container">
<div id="popup-container">
<button id="popup-btn">Information</button>
</div>
<div id="popup" class="popup">
<div class="popup-content">
<p>Information Popup</p>
<p>An information display popup with a clean and modern design.</p>
</div>
</div>
</div>
CSS
#popup-btn {
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;
}
#popup-btn:hover {
opacity: 0.5;
}
.popup {
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%;
}
.popup.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%) scale(0.9);
}
20% {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1.1);
}
30% {
transform: translateX(-50%) translateY(0) scale(1);
}
80% {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(100%) scale(0.9);
}
}
.popup-content {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 40px;
border-radius: 12px;
text-align: left;
position: relative;
min-width: 320px;
border-left: 6px solid #007bff;
box-shadow:
0 4px 12px rgba(0,123,255,0.15),
0 2px 4px rgba(0,0,0,0.1);
animation: infoSlide 0.6s ease-out;
overflow: hidden;
}
.popup-content::before {
content: 'ℹ';
position: absolute;
top: 52px;
left: 20px;
font-size: 32px;
color: #007bff;
background: rgba(0,123,255,0.1);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: infoIcon 2s ease-in-out infinite;
font-weight: bold;
line-height: 1;
}
@keyframes infoSlide {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes infoIcon {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
.popup-content p:first-child {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #007bff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
z-index: 1;
padding-left: 90px;
}
.popup-content p:last-of-type {
font-size: 16px;
color: #495057;
margin-bottom: 0;
line-height: 1.6;
font-weight: 400;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
z-index: 1;
padding-left: 90px;
}
@media (max-width: 768px) {
.popup-content {
padding: 30px;
min-width: 300px;
}
.popup-content p:first-child {
font-size: 24px;
}
.popup-content p:last-of-type {
font-size: 14px;
}
#popup-btn {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.popup-content {
padding: 25px;
min-width: 280px;
}
.popup-content p:first-child {
font-size: 22px;
}
.popup-content p:last-of-type {
font-size: 13px;
}
#popup-btn {
padding: 8px 16px;
font-size: 13px;
}
}
JavaScript
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('popup-btn');
const popup = document.getElementById('popup');
if (button && popup) {
button.addEventListener('click', function() {
popup.classList.add('active');
});
// アニメーション終了後にポップアップを閉じる
popup.addEventListener('animationend', function() {
popup.classList.remove('active');
});
}
});