Alert Dialog Box using jQuery and CSS

The alert window is very common and useful things for every web projects. We use the alert dialog box for display messages in the browser. All browsers have their default alert window style. Many times we need a custom alert dialog box for matching with our project theme. This tutorial helps you to create the custom alert popup.
We have been developed two scripts for customizing the alert dialog. One is JavaScript script named cwdialog.js and another is CSS script named cwdialog.css. You can change the alert dialog box style with the use of cwdialog.css file. In this tutorial we will discuss, how can you use this two scripts and customize alert message box. To complete the whole system we have used jQuery, CSS, and HTML. It is very simple and easy to use.

If you wish to view the demo, you can view the live demo from the above “Demo” link. Also, you can download the full scripts from the above “Download” link.

At first you need to include jQuery library file:

<script type="text/javascript" src="jquery.min.js"></script>

Include the cwdialog.js and cwdialog.css file into the HTML page:

<script type="text/javascript" src="cwdialog.js"></script>
<link type="text/css" rel="stylesheet" href="cwdialog.css"/>

Button HTML:

Just add HTML button tag and onClick element. You only need to call the CWdialog() function to use the custom dialog box. Pass the alert box message into this function.

<button onClick="CWdialog('This is a notify dialog box, created by CodexWorld.');">Click here</button>

cwdialog.js File:

This file contains the following JavaScript codes.

// Global CWdialog variables
var $CWdialog = null,
    $overlay = null,
    $body = null,
    $window = null,
    $cA = null,
    CWdialogQueue = [];

// Add overlay and set opacity for cross-browser compatibility
$(function() {
    
    $CWdialog = $('<div class="cwdialog">');
    $overlay = $('<div class="cwdialog-overlay">');
    $body = $('body');
    $window = $(window);
    
    $body.append( $overlay.css('opacity', '.94') ).append($CWdialog);
});

function CWdialog(text, options) {
    
    // Restrict blank modals
    if(text===undefined || !text) {
        return false;
    }
    
    // Necessary variables
    var $me = this,
            $_inner = $('<div class="cwdialog-inner">'),
            $_buttons = $('<div class="cwdialog-buttons">'),
            $_input = $('<input type="text">');
    
    // Default settings (edit these to your liking)
    var settings = {
    
        animation: 700, // Animation speed
        buttons: {
            confirm: {
                action: function() { $me.dissapear(); }, // Callback function
                className: null, // Custom class name(s)
                id: 'confirm', // Element ID
                text: 'Ok' // Button text
            }
        },
        input: false, // input dialog
        override: true // Override browser navigation while CWdialog is visible
    };
    
    // Merge settings with options
    $.extend(settings, options);
    
    // Close current CWdialog, exit
    if(text=='close') { 
        $cA.dissapear();
        return;
    }
    
    // If an CWdialog is already open, push it to the queue
    if($CWdialog.is(':visible')) {

        CWdialogQueue.push({text: text, options: settings});
    
        return;
    }
    
    // Width adjusting function
    this.adjustWidth = function() {
        
        var window_width = $window.width(), w = "20%", l = "40%";

        if(window_width<=800) {
            w = "90%", l = "5%";
        } else if(window_width <= 1400 && window_width > 800) {
            w = "70%", l = "15%";
        } else if(window_width <= 1800 && window_width > 1400) {
            w = "50%", l = "25%";
        } else if(window_width <= 2200 && window_width > 1800) {
            w = "30%", l = "35%";
        }
        
        $CWdialog.css('width', w).css('left', l);
        
    };
    
    // Close function
    this.dissapear = function() {
        
        $CWdialog.animate({
            top: '-100%'
        }, settings.animation, function() {
            
            $overlay.fadeOut(300);
            $CWdialog.hide();
            
            // Unbind window listeners
            $window.unbind("beforeunload");
            $window.unbind("keydown");

            // If in queue, run it
            if(CWdialogQueue[0]) { 
                CWdialog(CWdialogQueue[0].text, CWdialogQueue[0].options);
                CWdialogQueue.splice(0,1);
            }
        });
        
        return;
    };
    
    // Keypress function
    this.keyPress = function() {
        
        $window.bind('keydown', function(e) {
            // Close if the ESC key is pressed
            if(e.keyCode===27) {
                
                if(settings.buttons.cancel) {
                    
                    $("#cwdialog-btn-" + settings.buttons.cancel.id).trigger('click');
                } else {
                    
                    $me.dissapear();
                }
            } else if(e.keyCode===13) {

                if(settings.buttons.confirm) {
                    
                    $("#cwdialog-btn-" + settings.buttons.confirm.id).trigger('click');
                } else {
                    
                    $me.dissapear();
                }
            }
        });
    };
    
    // Add buttons
    $.each(settings.buttons, function(i, button) {
        
        if(button) {
            
            // Create button
            var $_button = $('<button id="cwdialog-btn-' + button.id + '">').append(button.text);
            
            // Add custom class names
            if(button.className) {
                $_button.addClass(button.className);
            }
            
            // Add to buttons
            $_buttons.append($_button);
            
            // Callback (or close) function
            $_button.on("click", function() {
                
                // Build response object
                var response = {
                    clicked: button, // Pass back the object of the button that was clicked
                    input: ($_input.val() ? $_input.val() : null) // User inputted text
                };
                
                button.action( response );
                //$me.dissapear();
            });
        }
    });
    
    // Disabled browser actions while open
    if(settings.override) {
        $window.bind('beforeunload', function(e){ 
            return "An alert requires attention";
        });
    }
    
    // Adjust dimensions based on window
    $me.adjustWidth();
    
    $window.resize( function() { $me.adjustWidth() } );
    
    // Append elements, show CWdialog
    $CWdialog.html('').append( $_inner.append('<div class="cwdialog-content">' + text + '</div>') ).append($_buttons);
    $cA = this;
    
    if(settings.input) {
        $_inner.find('.cwdialog-content').append( $('<div class="cwdialog-input">').append( $_input ) );
    }
    
    $overlay.fadeIn(300);
    $CWdialog.show().animate({
        top: '20%'
    }, 
        settings.animation, 
        function() {
            $me.keyPress();
        }
    );
    
    // Focus on input
    if(settings.input) {
        $_input.focus();
    }
    
} // end CWdialog();

cwdialog.css File:

This file contains the following CSS codes.

.cwdialog-overlay {
    background-color:#000;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index:9999;
    width: 100%;
    opacity: 0.7 !important;
}

div.cwdialog {
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
    -mox-box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
    color: #111;
    display: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    left: 32% !important;
    max-height: 90%;
    overflow: hidden;
    width:40% !important;
    border-radius:7px;
    position: fixed;
    top: -100%;
    z-index:9999;
}

div.cwdialog .cwdialog-inner {
    padding: 20px 20px 30px 20px;
    font-family: 'Comic Sans MS';
    font-size: 16px;
    color: #156A07;
}

div.cwdialog .cwdialog-input {
    margin-top: 10px;
    padding: 10px 0;
}

div.cwdialog .cwdialog-input input {
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
    -mox-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
    display: block;
    font-size: 13px;
    margin: 0 auto;
    padding: 5px 10px;
    width: 90%;
}

div.cwdialog .cwdialog-input input:focus {
    border-color: #01AEF0;
    outline: none;
}

div.cwdialog .cwdialog-buttons {
    border-top: 1px solid #e5e5e5;
    box-shadow: inset 0px 1px 0px #fff;
    -moz-box-shadow: inset 0px 1px 0px #fff;
    -webkit-box-shadow: inset 0px 1px 0px #fff;
    padding: 20px 20px;
    text-align: right;
}

div.cwdialog .cwdialog-buttons button {
    background-color: #3276b1;
    border:1px solid #285e8e;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 2px;
    overflow: hidden;
    border-radius:5px;
    font-family: 'Comic Sans MS';
    padding: 6px 12px;
    color:#FFF;
}

div.cwdialog .cwdialog-buttons button.blue { background: #01AEF0; }

div.cwdialog .cwdialog-buttons button.red { background: #D23A30; }

div.cwdialog .cwdialog-buttons button.blue, div.cwdialog .cwdialog-buttons button.red {
    color: #fff;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}

div.cwdialog .cwdialog-buttons button:hover {
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 1px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 1px 3px rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5), 0px 1px 3px rgba(0,0,0,0.4);
}

div.cwdialog .cwdialog-buttons button:active {
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.8);
}