.ja-popup {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
pointer-events: none;
}
.ja-popup.is-active {
display: block;
}
.ja-popup__overlay {
position: absolute;
inset: 0;
background: rgba( 0, 0, 0, 0.5 );
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.ja-popup--has-overlay .ja-popup__overlay {
pointer-events: auto;
}
.ja-popup:not( .ja-popup--has-overlay ) .ja-popup__overlay {
background: transparent;
}
.ja-popup.is-active .ja-popup__overlay {
opacity: 1;
}
.ja-popup__panel { --ja-popup-base: translate( 0, 0 );
--ja-popup-shift: translateY( 12px );
position: absolute;
pointer-events: auto;
width: min( var( --ja-popup-width, 480px ), calc( 100vw - 32px ) );
max-height: calc( 100vh - 32px );
max-height: calc( 100dvh - 32px );
overflow-y: auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.2 );
padding: 32px;
transform: var( --ja-popup-base ) var( --ja-popup-shift );
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.ja-popup.is-active .ja-popup__panel {
--ja-popup-shift: translateY( 0 );
opacity: 1;
}
.ja-popup--center .ja-popup__panel {
--ja-popup-base: translate( -50%, -50% );
top: 50%;
left: 50%;
}
.ja-popup--bottom-right .ja-popup__panel {
bottom: 16px;
right: 16px;
}
.ja-popup--bottom-left .ja-popup__panel {
bottom: 16px;
left: 16px;
}
.ja-popup--top .ja-popup__panel {
--ja-popup-base: translateX( -50% );
top: 0;
left: 50%;
border-radius: 0 0 8px 8px;
} @media ( prefers-reduced-motion: reduce ) {
.ja-popup__panel,
.ja-popup__overlay {
transition: none;
}
.ja-popup__panel {
--ja-popup-shift: translateY( 0 );
}
}
.ja-popup__close {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border: none;
background: transparent;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: #555;
}
.ja-popup__close:hover {
color: #000;
}
.ja-popup__close:focus-visible {
outline: 2px solid #2271b1;
outline-offset: 2px;
}
.ja-popup__panel:focus {
outline: none;
}
.ja-popup__content {
font-size: 16px;
line-height: 1.7;
} body.ja-popup-scroll-locked {
overflow: hidden;
}