JavaScript alert() Alternative

Each browser has its own design for the JavaScript alert() box. The design can't be changed with code on the web page, no matter how inappropriate the design is.

This article provides a solution — a div pops up instead of the browser's default alert() box.

See the demo of New Alert Box in action. Type some text into the form field and tap the button.

The new alert box is dismissed by tapping the "X" in the top-right corner of the box or by tapping anywhere outside the alert box.

As alluded to, you design the new alert box so it looks the way you want it to look. When the New Alert Box system is added to the page, it is installed and ready to use.

After the New Alert Box system is installed for your pages, use your newly-designed alert box by specifying NewAlert("…") instead of alert("…") in your JavaScript code.

New Alert Box Features

• The primary feature is that you design the alert box according to what is appropriate for your installation.

• The alert box has an image/text to dismiss the box.

• Between the page content and the alert box is a screen to make the page content inaccessible until after the alert box has been dismissed.

• The screen between the page content and the alert box may be transparent. Or it may be a semi-transparent color to focus the eye on the alert box's important message.

• For user convenience, the alert box is dismissed in either of two ways:

  1. Tapping the "dismiss" link in the alert box.

  2. Tapping anywhere outside the alert box.

• The alert box is responsive to browser/device width.

• Ease of use — The only change when writing JavaScript code is to use function NewAlert() instead of function alert().

Implementing New Alert Box

There are three parts to the system, in this order:

1. The screen div.

2. The New Alert Box div.

3. The JavaScript.

Those three parts, in that order, can be put near the bottom of a web page or pulled in from an external file with PHP.

Designing the Screen Div

The screen div has several parts that you need to be aware of.

These notes refer to the source code you'll find further below.

The id and onclick values need to remain as is. Further, all but the last style declaration is required as is.

The last style declaration, background-color, is optional. It may be used to specify a background color and opacity for the screen.

Here is the source code, with comments.

<!--
This is the screen between the page content and the New Alert Box.
The id value must be identical to the value for the variable NewAlertScreenIDvalue in the JavaScript.
The onclick attribute is required so taps outside the alert box will close the alert box.
All but the last style declarations are required for the screen.
Use the last style declaration if you want to color the screen.
-->
<div id="new-alert-box-screen" 
onclick="RemoveNewAlert()" 
style="
   display: none;
   position: absolute;
   z-index: 98;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.25);
"></div>
<!-- End of screen between the page content and the new alert box. -->

Designing the New Alert Box Div

The New Alert Box div has several parts that you need to be aware of.

These notes refer to the source code you'll find further below.

ID — The id value needs to remain as is.

STYLE — The first six style declarations are required as is. The rest can be used to style the New Alert Box div as you see fit.

Div for "dismiss" image or text. — The "dismiss" link can be whatever you wish and positioned where you see fit. If you decide to use the image in the example, please download the image and link to it on your server rather than pulling it from the Willmaster.com server.

Div for alert box message text. — This is an empty div that will be filled with the alert message text by the JavaScript.

Here is the source code for the New Alert Box div. It is heavily commented.

<!-- 
This is the New Alert Box div.
The id value must be identical to the value for the variable NewAlertDivIDvalue in the JavaScript.
The first six style declarations are required.
The rest of the style declarations visually design the new alert box and may be omitted, replaced, or more declarations added.
-->
<div id="new-alert-box-div" 
style="
   display: none;
   position: absolute;
   z-index: 99;
   left: 0;
   top: 0;
   box-sizing: border-box;
   background-color: #fff;
   color: #000;
   font-size: 1em;
   border: 1px solid #000;
   border-radius: 10px;
   padding: 1em;
   margin: 2em 2em 1em 1em;
   max-width: 500px;
   box-shadow: 0px 0px 9px 3px #333;
">

<!--
This is a "dismiss" image within the new alert box div that can be tapped to close/dismiss the new alert box.
Replace the image with your own image or your own text.
-->
<div style="position: absolute; right: -10px; top: -10px;">
<a href="javascript:RemoveNewAlert()">
<img src="https://www.willmaster.com/images/closeboxX20.png" style="height: 20px; width: 20px; border: none; outline: none;" alt="X">
</a>
</div>
<!--
This is the div within the new alert box div that will contain the alert message text.
The id value must be identical to the value for the variable NewAlertTextIDvalue in the JavaScript.
-->
<div id="new-alert-box-text"></div>
</div><!-- id="new-alert-box-div" -->
<!-- End of New Alert Box div. -->

The JavaScript

The JavaScript is copy and paste. No customization needed.

Here is the source code.

<script style="text/javascript">
/* 
   New Alert Box (replacement for browser alert box)
   Version 1.0
   June 29, 2018

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2018 Will Bontrager Software LLC

   This software is provided "AS IS" without any warranty of any kind. 
*/

var NewAlertScreenIDvalue = "new-alert-box-screen";
var NewAlertDivIDvalue    = "new-alert-box-div";
var NewAlertTextIDvalue   = "new-alert-box-text";

function RemoveNewAlert()
{
   var d = document.getElementById(NewAlertDivIDvalue).style.display = "none";
   var screen = NewAlertScreenIDvalue.length ? document.getElementById(NewAlertScreenIDvalue) : false;
   if( screen ) { screen.style.display = "none"; }
}

function NewAlert(s)
{
   var scrolltop  = NewAlertDocumentScrollPositionTop();
   var scrollleft = NewAlertDocumentScrollPositionLeft();
   var docheight  = NewAlertDocumentHeight();
   var docwidth   = NewAlertDocumentWidth();
   var viewheight = NewAlertViewportHeight();
   var viewwidth  = NewAlertViewportWidth();
   var d = document.getElementById(NewAlertDivIDvalue);
   var text = document.getElementById(NewAlertTextIDvalue);
   var screen = NewAlertScreenIDvalue.length ? document.getElementById(NewAlertScreenIDvalue) : false;
   if( screen )
   {
      screen.style.height = docheight + "px";
      screen.style.width = docwidth + "px";
      screen.style.left = "0px";
      screen.style.top = "0px";
      screen.style.display = "block";
   }
   d.style.display = "block";
   text.innerHTML = s;
   var divwidth  = d.offsetWidth;
   var divheight = d.offsetHeight;
   var topposition = parseInt( ( ( viewheight - divheight ) / 2 ) + scrolltop );
   var leftposition = parseInt( ( ( viewwidth - divwidth ) / 2 ) + scrollleft );
   if( topposition < 0 ) { topposition = 0; }
   if( leftposition < 0 ) { leftposition = 0; }
   d.style.top = topposition + "px";
   d.style.left = leftposition + "px";
}

function NewAlertDocumentScrollPositionTop()
{
   if(self.pageYOffset) { return self.pageYOffset; }
   else if(document.documentElement && document.documentElement.scrollTop) { return document.documentElement.scrollTop; }
   else if(document.body) { return document.body.scrollTop; }
}

function NewAlertDocumentScrollPositionLeft()
{
   if(self.pageYOffset) { return self.pageXOffset;  }
   else if(document.documentElement && document.documentElement.scrollLeft) { return document.documentElement.scrollLeft; }
   else if(document.body) { return document.body.scrollLeft; }
}

function NewAlertDocumentWidth()
{
   return Math.max( 
      (document.body.scrollWidth?document.body.scrollWidth:0), 
      (document.body.offsetWidth?document.body.offsetWidth:0), 
      (document.body.clientWidth?document.body.clientWidth:0), 
      (document.documentElement.scrollWidth?document.documentElement.scrollWidth:0), 
      (document.documentElement.offsetWidth?document.documentElement.offsetWidth:0) 
      );
}

function NewAlertDocumentHeight()
{
   return Math.max( 
      (document.body.scrollHeight?document.body.scrollHeight:0), 
      (document.body.offsetHeight?document.body.offsetHeight:0), 
      (document.body.clientHeight?document.body.clientHeight:0), 
      (document.documentElement.scrollHeight?document.documentElement.scrollHeight:0), 
      (document.documentElement.offsetHeight?document.documentElement.offsetHeight:0) 
      );
}

function NewAlertViewportWidth()
{
   return Math.max( 
      (self.innerWidth?self.innerWidth:0), 
      (document.documentElement.clientWidth?document.documentElement.clientWidth:0) 
      );
}

function NewAlertViewportHeight()
{
   return Math.max( 
      (self.innerHeight?self.innerHeight:0), 
      (document.documentElement.clientHeight?document.documentElement.clientHeight:0) 
      );
}
</script>

Final Implementation

Everything is now ready.

Put the three parts listed at Implementing New Alert Box at the end of your web page immediately above the cancel </body> tag.

<?php include("{$_SERVER['DOCUMENT_ROOT']}/location/of/file.php"); ?>

JavaScript you are currently using on your site can have alert("…") replaced with NewAlert("…") (replacing … with the message text, of course).

When you write new JavaScript in the future, the NewAlert() function may be used for all alert messages. It's that easy to use.

(This article first appeared in Possibilities newsletter.)

Will Bontrager