How To Add Alert Dialog Windows Jquery Css

How To Add Alert Dialog Windows Jquery Css

How To Add Alert Dialog Windows Jquery Css

0 Sales

Free

For each web project, the warning window is very popular and useful. For showing messages in the app, we use the warning dialog box. All browsers have a
warning window design by default. To suit our project theme, we often need a custom warning dialog box. This tutorial will help you create the custom popup alert.

Two scripts were created to configure the warning dialog. One is a script called cwdialog.js called JavaScript, and another is a script called cwdialog.css called CSS. By using cwdialog.css script, you can change the style of the warning dialog box. We'll explain how you can use these two scripts in this tutorial and configure the warning message box. We used jQuery, CSS, and HTML to complete the entire process. It's very easy and simple to use.

You can view the live demo from the "Demo" reference above if you want to show the demo. You can also access the full scripts from the "Access" link above.

First You Need To Include The Library File Of JQuery:

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

 

Include The File Cwdialog.Js And Cwdialog.Css In The HTML Page:

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

 

HTML Key:

simply add the HTML button tag and the element onClick. To use the custom dialog box, you just need to call the CWdialog) (feature. Pass the message in the warning box to this feature.

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


Cwdialog.Js File:

This file contains the following code.

// 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);
}

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 14, 2020

Updated Date : May 14, 2020

Ratings

Comments : 0

Downloads : 0