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(title, alertContent, width) {
var escHandler;
var createAndAddElement = function(el, className, text, appendTo) {
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", title, content);
createAndAddElement("div", "ui-close", "close", content);
createAndAddElement("div", "ui-body", alertContent, content);
//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 == 27) close();
};
(document.getElementsByTagName('body')[0]).addEventListener("keyup", escHandler, false);
};
//Close the dialogue box
var close = function() {
//remove esc listener
(document.getElementsByTagName('body')[0]).removeEventListener("keyup", escHandler, false);
//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 {
position: fixed;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
background: rgba(0, 0, 0, .2);
top: 0;
left: 0;
z-index: 998;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.ui-background.ui-opacity, .ui-content.ui-opacity {
opacity: 1;
filter: alpha(opacity=100);
}
.ui-content.ui-opacity{ margin-top: 75px; }
.ui-content {
margin: 50px auto;
width: 940px;
padding: 0;
position: relative;
background: #fff;
border: 1px solid #b4b4b4;
z-index: 999;
box-shadow: 0 0 25px rgba(0, 0, 0, .1);
border-radius: 2px;
max-height: 550px;
overflow-y: auto;
opacity: 0;
filter: alpha(opacity=0);
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}
.ui-close, .ui-title {
display: block;
width: 200px;
padding: 10px;
}
.ui-title {
color: #b6b6b6;
float: left;
}
.ui-close {
text-align: right;
float: right;
cursor: pointer;
}
.ui-close a {
text-decoration: none;
color: #b6b6b6;
}
.ui-body {
clear: both;
border-top: 1px solid #cdcdcd;
padding: 10px 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);