Description

Close Popup With Timer – Timed Popup Window Component

Add a simple and interactive timed popup to your website with the Close Popup With Timer component. This ready-to-use HTML, CSS, and JavaScript solution displays a centered popup with an image and a countdown timer, allowing visitors to close the popup after the specified waiting period. It is suitable for promotional messages, announcements, campaign banners, and other website content that benefits from a temporary overlay.

⏱️ Automatic Countdown Timer

The popup starts with a 10-second countdown displayed beside the close message. JavaScript updates the counter every second, creating a clear visual indication of the remaining waiting time. When the countdown finishes, the message changes to “Close,” and the close control becomes clickable.

🎨 Clean Overlay and Popup Design

The component uses a dark, semi-transparent background overlay to draw attention to the popup while keeping the underlying page visually subdued. The centered popup includes a white content area, rounded corners, a subtle shadow, and an image with a fixed display size. These styling choices provide a straightforward design that can be customized to suit different website themes.

🖼️ Customizable Image and Styling

Replace the included image URL with your own promotional banner, product image, announcement graphic, or campaign artwork. You can also modify the popup dimensions, background color, overlay opacity, border radius, typography, and countdown duration to match your branding.

💻 Easy HTML, CSS, and JavaScript Integration

The component keeps its structure, styling, and timer logic in a compact code snippet, making it convenient to integrate into a custom website or compatible theme. No additional JavaScript library is required by the supplied code.

This popup component is ideal for website owners who want a simple timed overlay without building the functionality from scratch. Test the timer and closing behavior on your target devices before publishing.

Note: The supplied code does not automatically close the popup when the timer ends; it enables the Close control instead.

Key Features

• 10-second countdown timer with live updates
• Centered popup with a dark, semi-transparent overlay
• Image-based popup content with customizable image URL
• Close control becomes clickable after the countdown
• Clean styling with rounded corners and subtle shadows
• Customizable popup dimensions, colors, and timer duration
• Lightweight HTML, CSS, and vanilla JavaScript implementation

Installation Guide

1. Download the Close Popup With Timer code file.
2. Back up your website or create a test page before adding the code.
3. Open the file in a code editor and review the HTML, CSS, and JavaScript sections.
4. Copy the CSS into your page’s head section or your theme’s custom stylesheet.
5. Insert the popup HTML inside the page body where the component should be available.
6. Add the JavaScript after the popup HTML, ensuring the popup elements exist before the script runs.
7. Replace the default image URL with your own image and adjust the popup styling to match your website.
8. Change the initial timer value in the JavaScript if you want a different countdown duration.
9. Test the countdown, confirm that the Close control becomes clickable after the timer finishes, and check the layout on desktop and mobile devices.
10. Publish the page after verifying that the popup works correctly and does not interfere with other website elements.