Squizee || Squizee Alert

Squizee Alert Guide

Step 1: Include CSS and JavaScript

      <head>
        <link rel="stylesheet" href="https://alerts.squizee.in/css">
      </head>

Step 2: Create a Container for Alerts

      <div id="squizee-alert" class="squizee-alert-hidden"></div>

Step 3: Define Alert Functions


                <script src="https://alerts.squizee.in/js"></script>
                <script>
                    // Sample functions to show different alerts
                    function showSuccessAlert() {
                        squizeeAlert({
                        title: 'Success',
                        text: 'Operation completed successfully!',
                        icon: '✔️'
                        });
                    }
                    
                    function showErrorAlert() {
                        squizeeAlert({
                        title: 'Error',
                        text: 'An error occurred. Please try again.',
                        icon: '❌'
                        });
                    }
                    
                    function showWarningAlert() {
                        squizeeAlert({
                        title: 'Warning',
                        text: 'This action cannot be undone.',
                        icon: '⚠️'
                        });
                    }
                    
                    function showInfoAlert() {
                        squizeeAlert({
                        title: 'Info',
                        text: 'Here is some information for you.',
                        icon: '❗'
                        });
                    }
                    
                    function showLoadingAlert() {
                        squizeeAlert({
                        title: 'Loading',
                        text: 'Please wait...',
                        icon: '<i class="fa fa-empire" ></i>',
                        iconSpin: true
                        });
                    }
                    
                    function showHTMLContentAlert() {
                        squizeeAlert({
                        title: 'HTML Content',
                        text: '<strong>This</strong> is <em>HTML</em> content!',
                        icon: '⚠️',
                        htmlContent: true
                        });
                    }
                    
                    function showDelayedAlert() {
                        squizeeAlert({
                        title: 'Delayed Alert',
                        text: 'This alert will appear after 3 seconds and disappear after 5 seconds.',
                        icon: '✔️',
                        delayIn: 3000,
                        delayOut: 5000
                        });
                    }
                    
                    function showFontAwesomeAlert() {
                        squizeeAlert({
                        title: 'Font Awesome Alert',
                        text: 'This alert uses Font Awesome icon!',
                        icon: '<i class="fa fa-spinner fa-spin"></i>', // Font Awesome icon markup
                        confirmButton: 'true',
                        confirmButtonText: 'Close',
                        });
                    }

                    function showCustomImageAlert() {
                        squizeeAlert({
                        title: 'Custom Icon Alert',
                        text: 'This alert has a custom icon!',
                        icon: '<img src="custom-icon.png" alt="Custom Icon">', // Custom icon markup
                        confirmButton: true,
                        confirmButtonText: 'Close',
                        });
                    }

                    function showCustomButtonAlert() {
                        squizeeAlert({
                        title: 'Custom Button Alert',
                        text: 'This alert has a custom button!',
                        icon: '⚙️',
                        confirmButton: true,
                        confirmButtonText: 'Custom Action',
                        onClose: function() {
                            console.log('Custom action executed.');
                        }
                        });
                    }

                    // Define other alert functions as needed (e.g., showErrorAlert, showWarningAlert, etc.)
                </script>

Step 4: Trigger Alerts

      <button onclick="showSuccessAlert()">Show Success Alert</button>
      <button onclick="showErrorAlert()">Show Error Alert</button>
      <button onclick="showWarningAlert()">Show Warning Alert</button>
      <button onclick="showInfoAlert()">Show Info Alert</button>
      <button onclick="showLoadingAlert()">Show Loading Alert</button>
      <button onclick="showHTMLContentAlert()">Show HTML Content Alert</button>
      <button onclick="showDelayedAlert()">Show Delayed Alert</button>
      <button onclick="showFontAwesomeAlert()">Show Font Awesome Alert</button>

Customize Alert Styling

Below is a sample CSS code that you can customize to style your alert system:


                /*Styles for the custom alert */
                #squizee-alert {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(1);
                background-color: #ffffff;
                border: 1px solid #ccc;
                padding: 20px;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                z-index: 9999;
                animation: bounceIn 0.2s ease forwards;
                }

                .squizee-alert-content {
                  text-align: center;
                }
            
                .squizee-alert-icon {
                  font-size: 30px;
                  margin-bottom: 10px;
                }
            
                .squizee-alert-hidden {
                  display: none;
                }

                .squizee-alert-confirmButton {
                    background-color: #fff;
                }
                
                .squizee-alert-icon {
                    font-size: 30px;
                }

                /* Apply spinning animation to the icon */
                .squizee-alert-icon.iconSpin {
                display: block; /* Ensure the element is displayed as a block */
                animation: spin 1s linear infinite; /* Adjust duration and timing function as needed */
                }

Customize the CSS properties such as colors, font sizes, padding, and border-radius to match your design requirements.

Squizee Alert Guide

Step 1: Include CSS and JavaScript

Step 2: Create a Container for Alerts

Step 3: Define Alert Functions

Step 4: Trigger Alerts

Customize Alert Styling

Demo