Custom Alert and Confirm Dialog Box using jQuery and CSS

Custom Alert and Confirm Dialog Box using jQuery and CSS

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Custom Alert and Confirm Dialog Box using jQuery and CSS

In this post we will show you Best way to implement javascript – Custom alert and confirm box in jquery, hear for How to Free Awesome jQuery Plugin For Custom Alert Box with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

External include libs

At First of all you need to External include the jQuery CDN or library.

HTML markup Part(index.html)

Click here

JavaScript Part (index.js)

// Global livedialog parameters
var $livedialog = null,
    $liveoverlay = null,
    $body = null,
    $window = null,
    $live = null,
    livedialogQueue = [];

// Add liveoverlay and set opacity for cross-browser new compatibility
$(function() {
    
    $livedialog = $('');
    $liveoverlay = $('');
    $body = $('body');
    $window = $(window);
    
    $body.append( $liveoverlay.css('opacity', '.94') ).append($livedialog);
});

function livedialog(text, options) {
    
    // Restrict all simple blank modals
    if(text===undefined || !text) {
        return false;
    }
    
    // Necessary simple parameters
    var $cusme = this,
            $_inner = $(''),
            $_buttons = $(''),
            $_input = $('');
    
    // Default config (edit purpose these to your simple liking)
    var config = {
    
        animation: 650, // Animation speed
        buttons: {
            confirm: {
                action: function() { $cusme.dissapear(); }, // livellback function
                classNacusme: null, // Custom class nacusme(s)
                id: 'confirm', // Elecusment ID
                text: 'Ok' // Button text
            }
        },
        input: false, // input simple dialog
        override: true // Override simple browser navigation and all the while livedialog live is visible
    };
    
    // cusmerge config with options
    $.extend(config, options);
    
    // Close current livedialog, exit
    if(text=='close') { 
        $live.dissapear();
        return;
    }
    
    if($livedialog.is(':visible')) {

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

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

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

                if(config.buttons.confirm) {
                    
                    $("#livedialog-btn-" + config.buttons.confirm.id).trigger('click');
                } else {
                    
                    $cusme.dissapear();
                }
            }
        });
    };
    // Add simple buttons
    $.each(config.buttons, function(i, button) {
        if(button) {
            
            // Create simple button
            var $_button = $('').append(button.text);
            
            // Add simple custom class nacusmes
            if(button.classNacusme) {
                $_button.addClass(button.classNacusme);
            }
            
            // Add to simple buttons
            $_buttons.append($_button);
            
            // livellback here some (or close) function
            $_button.on("click", function() {
                
                // Build response simple object
                var response = {
                    clicked: button, 
                    input: ($_input.val() ? $_input.val() : null) 
                };
                
                button.action( response );
               
            });
        }
    });
    if(config.override) {
        $window.bind('beforeunload', function(e){ 
            return "An alert some data requires attention";
        });
    }
    $cusme.adjustWidth();
    $window.resize( function() { $cusme.adjustWidth() } );
    $livedialog.html('').append( $_inner.append('' + text + '') ).append($_buttons);
    $live = this;
    if(config.input) {
        $_inner.find('.livedialog-content').append( $('').append( $_input ) );
    }
    
    $liveoverlay.fadeIn(300);
    $livedialog.show().animate({
        top: '20%'
    }, 
        config.animation, 
        function() {
            $cusme.keyPress();
        }
    );
    
    // Focus on input
    if(config.input) {
        $_input.focus();
    }
} // end livedialog();

Style Part (style.css)

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

span.livedialog {
    background: #D3D3d3;
    border: 2px solid #aaa;
    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    -mox-box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 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;
}

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

span.livedialog .livedialog-input {
    margin-top: 10px;
    padding: 10px 0;
}

span.livedialog .livedialog-input input {
    border: 2px solid rgba(0,0,0,0.3);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    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%;
}

span.livedialog .livedialog-input input:focus {
    border-color: #01AEF0;
    outline: none;
}

span.livedialog .livedialog-buttons {
    border-top: 2px solid #e5e5e5;
    box-shadow: inset 0px 2px 0px #D3D3d3;
    -moz-box-shadow: inset 0px 2px 0px #D3D3d3;
    -webkit-box-shadow: inset 0px 2px 0px #D3D3d3;
    padding: 20px 20px;
    text-align: right;
}

span.livedialog .livedialog-buttons button {
    background-color: #3276b1;
    border:2px solid #285e8e;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 3px;
    overflow: hidden;
    border-radius:5px;
    font-family: 'Comic Sans MS';
    padding: 6px 13px;
    color:#D3D3d3;
}

span.livedialog .livedialog-buttons button.blue { background: #01AEF0; }

span.livedialog .livedialog-buttons button.red { background: #D23A30; }

span.livedialog .livedialog-buttons button.blue, span.livedialog .livedialog-buttons button.red {
    color: #D3D3d3;
    text-shadow: 0px -2px 0px rgba(0,0,0,0.4);
}

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

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

Example

I hope you have Got Custom Alert and Confirm Dialog Box using jQuery and CSS And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.