AlertJS Documentation

Introduction

Welcome to the documentation for AlertJS. This plugin allows you to create customizable alerts easily and efficiently.

Installation

To install AlertJS, simply include the following script in your HTML file:

<script src="https://cdn.jsdelivr.net/gh/sumeetghimire/AlertJs/Alert.js"></script>

Demo

JavaScript Code


document.getElementById('showConfirmation').addEventListener('click', function() {
     ConfirmationDialog({
        title: 'Custom Modal',
        message: 'This is a custom modal.',
        position: 'top',
        backgroundColor: '#ffcccb', 
        confirmButtonBackgroundColor: 'red',
        confirmButtonTextColor: '#ffffff',
        onConfirm: function() {
        }
    });
});

JavaScript Code


document.getElementById('showWarningAlert').addEventListener('click', function() {
     AlertModal({
        title: 'Warning Alert',
        message: 'This is a warning alert message!',
        backgroundColor: 'white', 
        buttonBackgroundColor: '#dc3545', 
        buttonTextColor: '#ffffff', 
        onConfirm: function() {
            console.log('Alert confirmed!');
        }
    });
});

JavaScript Code


document.getElementById('ShowTripleButtonAlert').addEventListener('click', function() {
     TripleChoiceModal({
        title: 'Confirm Action',
        message: 'Do you want to proceed?',
        yesButtonBackgroundColor: '#28a745', 
        yesButtonTextColor: '#ffffff',       
        noButtonBackgroundColor: '#ffc107',  
        noButtonTextColor: '#000000',        
        cancelButtonBackgroundColor: '#dc3545', 
        cancelButtonTextColor: '#ffffff',  
        backgroundColor: 'white', 
        onYes: function() {
            console.log('Yes selected!');
        },
        onNo: function() {
            console.log('No selected!');
        },
        onCancel: function() {
            console.log('Cancelled!');
        }
    });
});

JavaScript Code


document.getElementById('showSucessMessage').addEventListener('click', function() {
     SuccessNotificationModal({
        title: 'Data Saved!',
        message: 'Your data has been successfully saved.',
        backgroundColor: '#e0ffe0', 
        textColor: '#005500', 
        checkmarkColor: '#007bff', 
        fontSize: '1.8rem', 
        duration: 2000 
    });
});

JavaScript Code


document.getElementById('showFormModal').addEventListener('click', function() {
     DynamicFormModal({
        title: 'User Registration',
        inputs: [
            { type: 'text', id: 'username', name: 'username', label: 'Username', placeholder: 'Enter your username' },
            { type: 'text', id: 'email', name: 'email', label: 'Email', placeholder: 'Enter your email' },
            { 
                type: 'select', 
                id: 'role', 
                name: 'role', 
                label: 'Role', 
                options: [{ value: 'admin', text: 'Admin' }, { value: 'user', text: 'User' }] 
            },
            { type: 'checkbox', id: 'terms', name: 'terms', label: 'I agree to the terms and conditions' },
            { 
                type: 'radio', 
                name: 'contactMethod', 
                label: 'Preferred Contact Method', 
                options: [
                    { value: 'email', text: 'Email', id: 'contactEmail' }, 
                    { value: 'phone', text: 'Phone', id: 'contactPhone' }
                ] 
            }
        ],
        onSubmit: function(data) {
            console.log('Form submitted:', data);
        },
        onCancel: function() {
            console.log('Form cancelled');
        },
        submitText: 'Register',
        cancelText: 'Close',
        backgroundColor: '#f9f9f9', 
        buttonColor: '#28a745', 
        cancelButtonColor: '#dc3545', 
        position: 'center'
    });
});

JavaScript Code


                            document.getElementById('showMultiStepForm').addEventListener('click', function() {
                                multiStepForm({
                                    steps: [
                                        {
                                            title: "Step 1: Personal Info",
                                            message: "Please enter your personal details.",
                                            formHtml: `
                                                <div class="form-group">
                                                    <input type="text" name="name" class="form-control" placeholder="Enter Name" required>
                                                </div>
                                            `,
                                            validation: function() {
                                                return document.querySelector('input[name="name"]').value.trim() !== '';
                                            },
                                            nextButtonText: "Next"
                                        },
                                        {
                                            title: "Step 2: Contact Info",
                                            message: "Please enter your contact information.",
                                            formHtml: `
                                                <div class="form-group">
                                                    <input type="email" name="email" class="form-control" placeholder="Enter Email" required>
                                                </div>
                                            `,
                                            validation: function() {
                                                return document.querySelector('input[name="email"]').value.trim() !== '';
                                            },
                                            nextButtonText: "Next"
                                        },
                                        {
                                            title: "Step 3: Account Info",
                                            message: "Please enter your account details.",
                                            formHtml: `
                                                <div class="form-group">
                                                    <input type="password" name="password" class="form-control" placeholder="Enter Password" required>
                                                </div>
                                            `,
                                            validation: function() {
                                                return document.querySelector('input[name="password"]').value.trim() !== '';
                                            },
                                            nextButtonText: "Submit"
                                        }
                                    ],
                                    onComplete: function() {
                                        console.log("Captured Data:", this.formData);  
                                        alert("Form Completed!");
                                    }
                                });
                            });

JavaScript Code


document.getElementById('showImageAlert').addEventListener('click', function() {
     CustomImageModal({
        title: 'Congratulations!',
        message: 'You have successfully completed the task.',
        imageSrc: 'https://fastly.picsum.photos/id/799/200/300.jpg?hmac=q6DulPHgFwTpoeoXzeVRLJ7-2cd-K69VyeJoIpUM5eg',
        backgroundColor: '#f0f8ff', 
        buttonColor: '#28a745', 
        position: 'center' 
    });
});

JavaScript Code


                        document.getElementById('showProgressBar').addEventListener('click', function() {
                             progressBar({
                                title: "File Upload",
                            message: "Uploading your files...",
                            progressBarColor: "#28a745",
                            duration: 5000, 
                            onProgressComplete: function() {
                                alert('Upload complete!');
                            }
                            });
                        
                        });