Home Producten Ultimate JavaScript Popup — Custom Triggers, Animations & Mobile

The Ultimate JavaScript Popup — All Options Explained!

This Ultimate JavaScript Popup is a powerful, customizable tool that lets you control exactly when and how your popup appears. Choose triggers like page load, scrolling, or exit intent. Fine-tune timing with fade-in delays and auto-close settings. Control how often it appears using session-based frequency options. Add personality with animations such as slide, scale, fade, or random effects. It even adapts to mobile devices and stops videos or audio when closed. With full flexibility and smart behavior, this popup system gives you complete control to create engaging, attention-grabbing experiences for your visitors.

Welcome to the master list of every powerful feature your Ultimate JavaScript Popup can use! These settings give YOU full control over when, how, and how often your popup appears. Let's dive into the magic!

23-11-2025 - added fullscreen option

Popup Trigger Options

Choose the moment your popup bursts onto the screen:

onload — Show the popup when the page loads.
scroll — Show the popup when the visitor scrolls to a specific point.

Scroll trigger value:

const SCROLL_TRIGGER_PX='70%';

Accepts pixels (e.g., 200) or percentages (e.g., '50%').

Timing Controls

You're the boss of its timing! Control when it appears and disappears:

FADE_IN_DELAY — Delay before popup fades in.
AUTO_CLOSE_DELAY — Automatically hide the popup after a set time.

const FADE_IN_DELAY=6000;
const AUTO_CLOSE_DELAY=80000;

Frequency & Session Control

How often should your popup appear per session? Choose your style!

once — Show only one time per session.
multiple — Show a limited number of times.
always — Show on every page load.
off — Disable popup entirely.

Limit for multiple mode:

const MAX_VIEWS_PER_SESSION=2;

Animation Styles

Make your popup enter with style! Pick from:

slide-top — Slides in from the top.
slide-bottom — Slides up from below.
slide-left — Comes in from the left side.
slide-right — Comes in from the right side.
scale — Zooms in elegantly.
fade — Simple fade, no movement.
random — Surprise your visitors! Random animation each time.

const ANIMATION_DIRECTION='slide-top';

Fullscreen Mode

Make your popup take over the entire screen for maximum impact!

true — Popup covers the entire viewport.
false — Standard popup size (default).

const FULLSCREEN_MODE=false;

Exit-Intent Features

Capture attention right before visitors leave your site!

EXIT_INTENT_ENABLED — Turn exit intent on/off.
EXIT_INTENT_SENSITIVITY — How close the mouse must get to the top before triggering.
EXIT_INTENT_DELAY — Minimum time the visitor must stay before exit intent activates.

const EXIT_INTENT_ENABLED=false;
const EXIT_INTENT_SENSITIVITY=20;
const EXIT_INTENT_DELAY=1000;

Smart Device Behavior

Your popup is smart enough to behave differently on mobile/tablet:

Detects mobile/tablet automatically
Exit intent uses "scroll up" instead of mouse leave

Auto-Stop Media

When the popup closes, it automatically stops:

HTML5 videos
YouTube iframes
Vimeo videos
Audio elements

No more audio continuing in the background — awesome!

You're Ready!

Your Ultimate JavaScript Popup is a powerhouse of flexibility and creativity. Tweak, experiment, and unleash its full potential on your website!

the ultimate javascript popup

Here the code!

CSS:

<style>
/* Popup Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

    /* Position Classes */
    .popup-overlay.position-center {
        justify-content: center;
        align-items: center;
    }

    .popup-overlay.position-top-left {
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px;
    }

    .popup-overlay.position-top-right {
        justify-content: flex-end;
        align-items: flex-start;
        padding: 20px;
    }

    .popup-overlay.position-bottom-left {
        justify-content: flex-start;
        align-items: flex-end;
        padding: 20px;
    }

    .popup-overlay.position-bottom-right {
        justify-content: flex-end;
        align-items: flex-end;
        padding: 20px;
    }

    .popup-overlay.position-left {
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
    }

    .popup-overlay.position-right {
        justify-content: flex-end;
        align-items: center;
        padding: 20px;
    }

/* Popup Container */
.popup {
    background: white;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    height: auto;
    overflow-y: auto;
    position: relative;
    transition: transform 0.5s ease, opacity 0.5s ease;
    scrollbar-width: thin;
}

/* Fullscreen Mode */
.popup.fullscreen {
    max-width: 95%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.9);
}

.popup.fullscreen .popup-header {
    border-radius: 0;
    flex-shrink: 0;
}

.popup.fullscreen .popup-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Animation styles for different directions */
.popup-overlay:not(.show) .popup.slide-top {
    transform: translateY(-100vh);
    opacity: 0;
}

.popup-overlay:not(.show) .popup.slide-bottom {
    transform: translateY(100vh);
    opacity: 0;
}

.popup-overlay:not(.show) .popup.slide-left {
    transform: translateX(-100vw);
    opacity: 0;
}

.popup-overlay:not(.show) .popup.slide-right {
    transform: translateX(100vw);
    opacity: 0;
}

.popup-overlay:not(.show) .popup.scale {
    transform: scale(0.7);
    opacity: 0;
}

.popup-overlay:not(.show) .popup.fade {
    transform: scale(1);
    opacity: 0;
}

    /* Rotate Animation */
    .popup-overlay:not(.show) .popup.rotate {
        transform: rotate(180deg) scale(0.5);
        opacity: 0;
    }

    /* Fly In Animation */
    .popup-overlay:not(.show) .popup.fly-in {
        transform: translate(-50vw, -50vh) scale(0.3) rotate(-45deg);
        opacity: 0;
    }

.popup-overlay.show .popup {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
}

/* Popup Header */
.popup-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 4px 4px 0 0;
    position: relative;
}

.popup-header h2 {
    margin: 0;
    font-size: 24px;
}

/* Close Button */
.popup .close-btn {
    position: absolute;
    top: 20px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 1;
}

.popup .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Popup Body */
.popup-body {
    padding: 30px 25px;
}

.popup-body p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

.popup-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 auto;
    display: block;
}

.popup-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .popup {
        width: 70%;
        max-width: 500px;
    }

    .popup-header {
        padding: 20px;
    }

    .popup-header h2 {
        font-size: 20px;
        padding-right: 30px;
    }

    .popup-body {
        padding: 20px;
    }

    .popup-body.image-only {
        padding: 0;
    }

    .popup .close-btn {
        top: 15px;
    }

    /* Reset positioning on mobile for better UX */
    .popup-overlay.position-top-left,
    .popup-overlay.position-top-right,
    .popup-overlay.position-bottom-left,
    .popup-overlay.position-bottom-right,
    .popup-overlay.position-left,
    .popup-overlay.position-right {
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .popup:not(.fullscreen) {
        width: 90%;
        max-width: 320px;
        padding: 15px;
    }
    .popup-header h2 {
        font-size: 18px;
    }

    .popup-body p {
        font-size: 14px;
    }
}
</style>

HTML:

<!-- Popup Overlay -->
<div class="popup-overlay position-center" id="popupOverlay">
    <div class="popup" id="popupBox">
        <div class="popup-header">
            <h2>Wait! Did you read this? ????</h2>
            <button class="close-btn" onclick="closePopup()">&times;</button>
        </div>
        <div class="popup-body">
            <p>Before you go, we have a special offer for you!</p>
            <p>Sign up for our newsletter now and receive <strong>20% discount</strong> on your first purchase!</p>
            <button class="popup-cta" onclick="closePopup()">Yes, count me in!</button>
        </div>
    </div>
</div>
<!-- END Popup Overlay -->

JS:

<!-- Popup script -->
<script>
//======SETTINGS======
const POPUP_TRIGGER='onload'; // onload or scroll
const SCROLL_TRIGGER_PX='70%'; // Pixels (e.g., 100) or percentage (e.g., '50%')

const FADE_IN_DELAY=POPUP_TRIGGER==='onload' ? 6000 : 500; // Delay for fade in (ms)
const AUTO_CLOSE_DELAY=80000; // Auto close after x ms (8000=8 seconds)

// POPUP FREQUENCY OPTIONS:
// 'once'=1x per session
// 'multiple'=multiple times per session (e.g. 2x, 3x, etc.)
// 'always'=on every page
// 'off'=popup is disabled
const POPUP_FREQUENCY='always'; // Change this value
const MAX_VIEWS_PER_SESSION=2; // Only relevant for 'multiple'

// ANIMATION DIRECTION:
// 'slide-top'=Slide in from top to center
// 'slide-bottom'=Slide in from bottom to center
// 'slide-left'=Slide in from left to center
// 'slide-right'=Slide in from right to center
// 'scale'=Zoom in from small (default)
// 'fade'=Only fade in, no movement
// 'random'=Random
// 'rotate'=Rotate
// 'fly-in'=Fly in
const ANIMATION_DIRECTION='slide-top'; // Change this value

// FULLSCREEN MODE
const FULLSCREEN_MODE=false; // Set to true for fullscreen popup

// EXIT INTENT SETTINGS
const EXIT_INTENT_ENABLED=false; // Set to false to disable exit intent
const EXIT_INTENT_SENSITIVITY=20; // Pixels from top to trigger
const EXIT_INTENT_DELAY=1000; // Minimum time on page before exit intent works (ms)

const SESSION_STORAGE_NAME='popupViewCount';
const EXIT_INTENT_STORAGE_NAME='exitIntentShown';

let popupTriggered=false;
let exitIntentTriggered=false;
let pageLoadTime=Date.now();
let lastScrollPosition=0;

// Function to detect if the device is a tablet or phone
function isMobileOrTablet() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        || (window.innerWidth <=1024);
}

// Function to check if popup should be shown
function shouldShowPopup() {
    if (POPUP_FREQUENCY==='off') {
        return false;
    }

    if (POPUP_FREQUENCY==='always') {
        return true;
    }

    const viewCount=parseInt(sessionStorage.getItem(SESSION_STORAGE_NAME) || '0');

    if (POPUP_FREQUENCY==='once') {
        return viewCount===0;
    }

    if (POPUP_FREQUENCY==='multiple') {
        return viewCount < MAX_VIEWS_PER_SESSION;
    }

    return false;
}

// Function to check if exit intent popup should be shown
function shouldShowExitIntent() {
    if (!EXIT_INTENT_ENABLED) {
        return false;
    }

    if (exitIntentTriggered) {
        return false;
    }

    // Check if popup has already been shown in this session
    if (POPUP_FREQUENCY==='once') {
        const exitShown=sessionStorage.getItem(EXIT_INTENT_STORAGE_NAME);
        if (exitShown==='true') {
            return false;
        }
    }

    // Check if user has been on page long enough
    const timeOnPage=Date.now() - pageLoadTime;
    if (timeOnPage < EXIT_INTENT_DELAY) {
        return false;
    }

    return shouldShowPopup();
}

// Function to register popup view
function registerPopupView() {
    if (POPUP_FREQUENCY==='always' || POPUP_FREQUENCY==='off') {
        return; // No tracking needed
    }

    const viewCount=parseInt(sessionStorage.getItem(SESSION_STORAGE_NAME) || '0');
    sessionStorage.setItem(SESSION_STORAGE_NAME, (viewCount + 1).toString());
    sessionStorage.setItem(EXIT_INTENT_STORAGE_NAME, 'true');
}

// Function to stop all videos in popup
function stopVideos() {
    const popup=document.getElementById('popupBox');

    // Stop HTML5 videos
    const videos=popup.querySelectorAll('video');
    videos.forEach(video=> {
        video.pause();
        video.currentTime=0;
    });

    // Stop Video iframes
    const iframes=popup.querySelectorAll('iframe');
    iframes.forEach(iframe=> {
        const src=iframe.src;
        // Check if it's a YouTube video
        if (src.includes('youtube.com') || src.includes('youtu.be')) {
            // Stop video by reloading iframe src
            iframe.src=src;
        }
        // Also handle other video embeds (Vimeo, etc.)
        else if (src.includes('vimeo.com') || src.includes('dailymotion.com')) {
            iframe.src=src;
        }
    });

    // Stop audio elements
    const audios=popup.querySelectorAll('audio');
    audios.forEach(audio=> {
        audio.pause();
        audio.currentTime=0;
    });
}

// Function to open popup
function openPopup() {
    const overlay=document.getElementById('popupOverlay');
    const popup=document.getElementById('popupBox');

    // Add fullscreen class if enabled
    if (FULLSCREEN_MODE) {
        popup.classList.add('fullscreen');
    }

    // Add animation class
    const animationOptions=['slide-top', 'slide-bottom', 'slide-left', 'slide-right', 'scale', 'fade', 'rotate', 'fly-in'];
    const animationClass=ANIMATION_DIRECTION==='random' ? animationOptions[Math.floor(Math.random() * animationOptions.length)] : ANIMATION_DIRECTION;

    popup.className='popup ' + animationClass + (FULLSCREEN_MODE ? ' fullscreen' : '');

    setTimeout(()=> {
        overlay.classList.add('show');
    }, FADE_IN_DELAY);

    // Auto close after set time
    setTimeout(()=> {
        closePopup();
    }, AUTO_CLOSE_DELAY + FADE_IN_DELAY);
}

// Function to close popup
function closePopup() {
    const overlay=document.getElementById('popupOverlay');
    overlay.classList.remove('show');

    // Stop all videos when closing popup
    stopVideos();

    registerPopupView();
}

// Exit Intent function - detects when mouse leaves the page
function handleExitIntent(e) {
    // If exit intent is enabled and it's a mobile/tablet device, only show on scroll up
    if (EXIT_INTENT_ENABLED && isMobileOrTablet()) {
        return; // Exit intent via mouse doesn't work on mobile/tablet
    }

    // Check if mouse moves to top of page (leaving)
    if (e.clientY <=EXIT_INTENT_SENSITIVITY && shouldShowExitIntent()) {
        exitIntentTriggered=true;
        openPopup();

        // Remove event listener after triggering
        document.removeEventListener('mouseleave', handleExitIntent);
    }
}

// Scroll up detection for mobile/tablet exit intent
function handleScrollUpExitIntent() {
    if (!EXIT_INTENT_ENABLED || !isMobileOrTablet()) {
        return;
    }

    const currentScrollPosition=window.scrollY || window.pageYOffset;

    // Detect scroll up
    if (currentScrollPosition < lastScrollPosition && currentScrollPosition > 100) {
        if (shouldShowExitIntent()) {
            exitIntentTriggered=true;
            openPopup();
            window.removeEventListener('scroll', handleScrollUpExitIntent);
        }
    }

    lastScrollPosition=currentScrollPosition;
}

// Close popup when clicking on overlay
document.getElementById('popupOverlay').addEventListener('click', function(e) {
    if (e.target===this) {
        closePopup();
    }
});

// Close popup with ESC key
document.addEventListener('keydown', function(e) {
    if (e.key==='Escape') {
        closePopup();
    }
});

// Function to calculate scroll trigger threshold
function getScrollTriggerThreshold() {
    if (typeof SCROLL_TRIGGER_PX==='string' && SCROLL_TRIGGER_PX.includes('%')) {
        // Parse percentage value
        const percentage=parseFloat(SCROLL_TRIGGER_PX);
        // Calculate percentage of total document height
        const documentHeight=document.documentElement.scrollHeight;
        const viewportHeight=window.innerHeight;
        const scrollableHeight=documentHeight - viewportHeight;
        return (scrollableHeight * percentage) / 100;
    }
    // Return pixel value
    return SCROLL_TRIGGER_PX;
}

function handleScroll() {
    if (popupTriggered) return;

    const scrollPosition=window.scrollY || window.pageYOffset;
    const threshold=getScrollTriggerThreshold();

    if (scrollPosition >=threshold) {
        popupTriggered=true;
        if (shouldShowPopup()) {
            openPopup();
        }
        window.removeEventListener('scroll', handleScroll);
    }
}

// Activate exit intent detection
if (EXIT_INTENT_ENABLED) {
    if (isMobileOrTablet()) {
        // For mobile/tablet: use scroll up detection
        window.addEventListener('scroll', handleScrollUpExitIntent);
    } else {
        // For desktop: use mouse leave detection
        document.addEventListener('mouseleave', handleExitIntent);
    }
}

if (EXIT_INTENT_ENABLED===false) {
    window.addEventListener('load', function() {
        if (POPUP_TRIGGER==='onload') {
            if (shouldShowPopup()) {
                openPopup();
            }
        } else if (POPUP_TRIGGER==='scroll') {
            window.addEventListener('scroll', handleScroll);

            handleScroll();
        }
    });
}
</script>

The Ultimate JavaScript Popup — All Options Explained!