Alerts Example

Alert Dialogs

RSL Alert Dialogs provide a modern, customizable alternative to browser's native alert(), confirm(), and prompt() functions. These modal dialogs support multiple animation styles, semantic color types, custom positioning, and work seamlessly with promises for async/await patterns. Unlike native browser dialogs, RSL alerts are fully styled, accessible, and can be customized to match your application's design.

New to Alert Dialogs?

Get up and running in 4 minutes with our Quick Start Guide!

View Quick Start Guide

Alert System Features
rslAlert() — Show simple alert message with OK button
rslConfirm() — Show confirmation dialog with Yes/No buttons
rslPrompt() — Show input dialog with text field and Submit/Cancel
data-rsl-alert — Trigger alert via button data attribute
data-rsl-confirm — Trigger confirm via button data attribute
data-rsl-prompt — Trigger prompt via button data attribute
Animation Options: zoom-in, fade-in, slide-down, slide-up
Type Options: info, success, warning, danger/error
Position Options: center (default), top, bottom

Download RSL Example Pack

Basic Alert Dialog

Simple alert messages for providing information to users. These work like the native alert() function but with custom styling and animations.


rslAlert({
    title: 'Welcome!',
    message: 'Thanks for visiting our site.',
    type: 'info',
    animation: 'zoom-in'
});

Usage: The rslAlert() function returns a Promise that resolves when the user clicks OK. Perfect for providing feedback after user actions or showing important information.

Alert Types (Semantic Colors)

Use different alert types to convey the nature of the message - success for positive actions, warnings for cautions, errors for problems, and info for general notifications.


// Success alert (green)
rslAlert({ type: 'success', message: 'Operation completed!' });

// Info alert (blue)
rslAlert({ type: 'info', message: 'Here\'s some information.' });

// Warning alert (yellow)
rslAlert({ type: 'warning', message: 'Please be careful.' });

// Error alert (red)
rslAlert({ type: 'error', message: 'Something went wrong!' });

Confirmation Dialogs

Confirmation dialogs ask users to confirm an action before proceeding. Use them before destructive operations like deletions, or for important decisions. The function returns a Promise that resolves to true (confirmed) or false (cancelled).


rslConfirm({
    title: 'Delete Item',
    message: 'Are you sure you want to delete this item?',
    confirmText: 'Delete',
    cancelText: 'Cancel',
    type: 'danger'
}).then(function(result) {
    if (result) {
        console.log('User confirmed - delete the item');
    } else {
        console.log('User cancelled');
    }
});

// Using async/await
async function handleDelete() {
    const confirmed = await rslConfirm({
        message: 'Delete this item?',
        type: 'danger'
    });
    
    if (confirmed) {
        // Perform delete operation
    }
}

Best Practice: Always use confirmation dialogs before destructive actions like deleting data, closing unsaved work, or making irreversible changes.

Prompt Dialogs (User Input)

Prompt dialogs collect text input from users. They return a Promise that resolves to the entered value (if submitted) or null (if cancelled). Perfect for getting names, values, or simple text input. Includes built-in validation support.


// Basic prompt
rslPrompt({
    title: 'Enter Your Name',
    message: 'Please enter your full name:',
    placeholder: 'John Doe',
    defaultValue: '',
    confirmText: 'Submit',
    cancelText: 'Cancel',
    type: 'info'
}).then(function(value) {
    if (value !== null) {
        console.log('User entered: ' + value);
    }
});

// Required input with validation
rslPrompt({
    title: 'Required Field',
    message: 'This field cannot be empty:',
    placeholder: 'Enter something...',
    required: true,  // Enables validation
    type: 'warning'
}).then(function(value) {
    if (value) {
        console.log('Valid input: ' + value);
    }
});

// Using async/await
async function getName() {
    const name = await rslPrompt({
        message: 'Enter your name:',
        placeholder: 'Your name',
        required: true
    });
    
    if (name) {
        console.log('Hello, ' + name);
    }
}

Built-In Validation: Set required: true to enable input validation. The prompt will not close if the field is empty, and an error message will appear. Validation also works for email type inputs. The input field automatically focuses and selects text, and users can press Enter to submit or Escape to cancel.

Different Animations

Choose from four animation styles to control how alerts appear: zoom-in (scale effect), fade-in (opacity), slide-down (from top), or slide-up (from bottom).


// Zoom in animation (default)
rslAlert({ animation: 'zoom-in', message: 'Zoom in effect!' });

// Fade in animation
rslAlert({ animation: 'fade-in', message: 'Fade in effect!' });

// Slide down animation
rslAlert({ animation: 'slide-down', message: 'Slide down effect!' });

// Slide up animation
rslAlert({ animation: 'slide-up', message: 'Slide up effect!' });

Positioning Options

Position alerts at the top, center, or bottom of the screen. Top positioning works well for non-critical notifications, while center (default) is best for important messages requiring immediate attention.


// Top position (20% from top)
rslAlert({ position: 'top', message: 'Top alert!' });

// Center position (default, vertically centered)
rslAlert({ position: 'center', message: 'Center alert!' });

// Bottom position (20% from bottom)
rslAlert({ position: 'bottom', message: 'Bottom alert!' });

Data Attribute Triggers

For simpler use cases, you can trigger alerts directly from buttons using data attributes. No JavaScript code required - just add the appropriate data attributes to your button.


                        
                        

                        
                        

                        
                        

                        <script>
                        // Confirm callback - runs only when user clicks "Confirm"
                        function myConfirmFunction() {
                            console.log('User confirmed!');
                            // Your action here
                        }

                        // Prompt callback - receives the input value
                        function myPromptFunction(value) {
                            console.log('User entered:', value);
                            // Your action here with the value
                        }
                        </script>

Data Attribute Callbacks:
• data-rsl-alert - No callback support, just displays a message
• data-rsl-confirm-callback - Specify a global function name to run when user clicks "Confirm" (not "Cancel")
• data-rsl-prompt-callback - Specify a global function name that receives the input value when user clicks "Submit" (not "Cancel")

Important: Callback functions must be global (attached to window) and defined before the button is clicked. The confirm callback receives no parameters, while the prompt callback receives the user's input value as a parameter.

Advanced: Email Prompt with Validation

This example shows a prompt dialog collecting an email address with validation. After the user submits, an inlay alert appears on the page showing success or error feedback.


async function showEmailPrompt() {
    const email = await rslPrompt({
        title: 'Subscribe to Newsletter',
        message: 'Enter your email address to subscribe:',
        placeholder: 'your@email.com',
        inputType: 'email',
        type: 'info'
    });

    if (email) {
        // Validate email format
        if (email.includes('@') && email.includes('.')) {
            // Show success inlay alert on the page
            window.showInlayAlert({
                container: '#emailInlayAlert',
                type: 'success',
                message: 'Success! Subscribed with ' + email,
                dismissible: true,
                duration: 5000
            });
        } else {
            // Show error inlay alert on the page
            window.showInlayAlert({
                container: '#emailInlayAlert',
                type: 'danger',
                message: 'Invalid email format. Please try again.',
                dismissible: true,
                duration: 5000
            });
        }
    } else {
        // User cancelled - show info inlay alert
        window.showInlayAlert({
            container: '#emailInlayAlert',
            type: 'info',
            message: 'Subscription cancelled.',
            dismissible: true,
            duration: 3000
        });
    }
}

Required Files

To use RSL alerts in your project, include these CSS and JavaScript files:


                        <script src="javascript/alerts.js"></script>

♿ Accessibility Features (Built-In)

RSL Alerts are now fully ADA-compliant out of the box with automatic accessibility features:

✅ Focus Trapping: Tab key navigation is trapped within the alert dialog - users cannot accidentally tab to background content while an alert is active
✅ Scroll Locking: Page scroll is automatically disabled when alerts are open, preventing confusion and maintaining context
✅ Focus Restoration: Focus automatically returns to the triggering element when the alert closes
✅ Keyboard Navigation:
- Tab/Shift+Tab cycles through focusable elements within the alert
- Escape key closes the alert (same as Cancel)
- Enter key submits prompt dialogs
✅ ARIA Attributes: Automatically includes proper roles (alertdialog, dialog), aria-modal="true", aria-labelledby, aria-describedby, and aria-invalid for validation
✅ Screen Reader Support: Alert title and message are properly announced with semantic HTML and ARIA labels
✅ Form Validation: Prompt dialogs include built-in validation with error messages and aria-invalid attributes
✅ Visual Focus Indicators: Browser default focus rings are preserved for keyboard users
✅ Color Contrast: All button text and backgrounds meet WCAG AA standards
✅ Touch-Friendly: Button sizes are optimized for touch targets (minimum 44x44px)
✅ Responsive Design: Alerts adapt to screen size, stacking buttons vertically on mobile

No developer action required - all accessibility features work automatically! However, you should:

Provide descriptive alert titles and messages
Use semantic alert types (success, warning, error, info) appropriately
Keep alert text concise and easy to understand
Use confirmation dialogs before destructive actions
Add validation attributes (required, input-required class) to prompt inputs when needed

Alerts Examples