code everywhere
technology, web services and applications

a better JavaScript alert box

posted on April 11, 2015, 2:33 pm in

A vanilla JavaScript Alert / Dialog box, style with simple CSS rules.

The Code

JavaScript

/*
 * UI-Alert (April 11 2015)
 * Copyright 2015, http://codeeverywhere.ca
 * Licensed under the MIT license.
 */
function uiAlert(titlealertContentwidth) {
    var 
escHandler;
    var 
createAndAddElement = function(elclassNametextappendTo) {
        var 
el document.createElement(el);
        if (
className.length 0)
            
el.className className;
        if (
text.length 0)
            
el.innerHTML text;
        
appendTo.appendChild(el);
    };

    
//Open the dialogue box
    
var open = function() {
        var 
body document.getElementsByTagName("body")[0];
        
createAndAddElement("div""ui-background"""body);

        var 
background document.getElementsByClassName("ui-background")[0];
        
createAndAddElement("div""ui-content animated bounceIn"""background);

        
//add animation
        
setTimeout(function() {
            
background.className background.className " ui-opacity";
        }, 
50);

        var 
content document.getElementsByClassName("ui-content")[0];
        
createAndAddElement("div""ui-title"titlecontent);
        
createAndAddElement("div""ui-close""close"content);
        
createAndAddElement("div""ui-body"alertContentcontent);

        
//add animation
        
setTimeout(function() {
            
content.className content.className " ui-opacity";
        }, 
350);

        
//add max-height
        
var height window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight || 500;
        
content.style.maxHeight = (height 75 15) + "px";
        
content.style.width width "px";

        
//Close box button
        
var closeBtn document.getElementsByClassName("ui-close")[0];
        
closeBtn.addEventListener("click", function() {
            
close();
        }, 
false);

        
//add esc btn listener
        
escHandler = function(key) {
            if (
key.keyCode == 27close();
        };
        (
document.getElementsByTagName('body')[0]).addEventListener("keyup"escHandlerfalse);
    };

    
//Close the dialogue box
    
var close = function() {
        
//remove esc listener
        
(document.getElementsByTagName('body')[0]).removeEventListener("keyup"escHandlerfalse);

        
//add animation
        
var content document.getElementsByClassName("ui-content")[0];
        
content.className "ui-content";

        
//add animation
        
setTimeout(function() {
            var 
background document.getElementsByClassName("ui-background")[0];
            
background.className "ui-background";
        }, 
200);

        
//delay deletion
        
setTimeout(function() {
            
//delete elements
            
var background document.getElementsByClassName("ui-background")[0];
            while (
background.firstChild)
                
background.removeChild(background.firstChild);
            
background.parentNode.removeChild(background);
        }, 
550);
    };

    
//init Open()
    
open();
}
window.uiAlert uiAlert;

CSS

.ui-background {
    
positionfixed;
    
width100%;
    
height100%;
    
opacity0;
    
filteralpha(opacity=0);
    
backgroundrgba(000.2);
    
top0;
    
left0;
    
z-index998;
    
transitionall 300ms ease-in-out;
    -
webkit-transitionall 300ms ease-in-out;
}
.
ui-background.ui-opacity, .ui-content.ui-opacity {
    
opacity1;
    
filteralpha(opacity=100);
}
.
ui-content.ui-opacitymargin-top75px; }
.
ui-content {
    
margin50px auto;
    
width940px;
    
padding0;
    
positionrelative;
    
background#fff;
    
border1px solid #b4b4b4;
    
z-index999;
    
box-shadow0 0 25px rgba(000.1);
    
border-radius2px;
    
max-height550px;
    
overflow-yauto;
    
opacity0;
    
filteralpha(opacity=0);
    
transitionall 200ms ease-in-out;
    -
webkit-transitionall 200ms ease-in-out;
}
.
ui-close, .ui-title {
    
displayblock;
    
width200px;
    
padding10px;
}
.
ui-title {
    
color#b6b6b6;
    
floatleft;
}
.
ui-close {
    
text-alignright;
    
floatright;
    
cursorpointer;
}
.
ui-close a {
    
text-decorationnone;
    
color#b6b6b6;
}
.
ui-body {
    
clearboth;
    
border-top1px solid #cdcdcd;
    
padding10px 10px 20px;
}

example usage

Add the JS and CSS to your page, then call uiAlert(title, content, width), ex:

uiAlert('title''Your content <strong>here</strong> ...'500);
Open Alert

Online Demo

jsfiddle.net/8a53aLuq/

recent posts

< back