Confirmation Boxes

2013-08-15 Leave a comment? Go to comments(0)

Introduction

Confirmation boxes are definitely featured by any JavaScript framework. Nevertheless I was interested in learning what it took to implement configurable confirmation and decision boxes.

Confirmation Box

Confirmation Box

The HTML part

Just insert a hidden image to represent the box and a second one for the “curtain”. Such a curtain not only looks smart, but it avoids clicking on an element that should be protected while the page is dimmed.

The box itself contains a division element that encapsulates a paragraph and the confirmation button.

HTML

<img id="confirmation_box" src="path_to_box_image">
<img id="busy" src="path_to_curtain_image">
 
<div name="div_confirmation" id="div_confirmation">
    <p name="p_confirmation" id="p_confirmation"></p>
    <input type="button" name="button_confirmation" id="button_confirmation" value="Continue" onclick="javascript:FadeOutElement( 'div_confirmation' );">
</div>

Generating this code using your preferred language, captions, titles etc. may be set to variable values e.g. to enable national language support.

The CSS part

On page load, both images are hidden by setting full transparency (no opacity). To avoid any interference with visible elements, place the images below other elements (z-index -1). The opacity transition causes the element to fade in or out within 300 milliseconds.

The division takes some more initial styling with sizing, borders and shadow.

CSS

img.dimmer
{
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s linear;
}
 
div.confirmation
{
    z-index: 60;
    position: absolute;
    width: 200px;
    height: 80px;
    background-color: #FFFFFF;
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
    border-top: 2px solid silver;
    border-bottom: 2px solid silver;
    border-left: 2px solid silver;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 10px 10px 5px #888;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s linear, opacity 0.3s linear;
}

The JavaScript part

In order to let the confirmation box appear, three steps are required

  • Scale and display the curtain
  • Center the box
  • Fade in the box

To scale the curtain, first the dimensions of the visible window are evaluated

JavaScript

function GetWindowGeometry()
{
    let intWidth = 0, intHeight = 0, intScrollX = 0, intScrollY = 0;
 
    intWidth = window.innerWidth;
    intHeight = window.innerHeight;
 
    if ( self.pageYOffset )          // all except Internet Explorer
    {
        intScrollX = self.pageXOffset;
        intScrollY = self.pageYOffset;
    }
    else if ( document.documentElement && document.documentElement.scrollTop )          // Internet Explorer 6 Strict
    {
        intScrollX = document.documentElement.scrollLeft;
        intScrollY = document.documentElement.scrollTop;
    }
    else if ( document.body )           // all other Internet Explorers
    {
        intScrollX = document.body.scrollLeft;
        intScrollY = document.body.scrollTop;
    };	
 
    return new Array( intWidth, intHeight, intScrollX, intScrollY );
}

These values are then used to scale the curtain while considering a vertical scroll bar. Increasing the opacity causes the curtain to fade in based on the transition defined in CSS.

JavaScript

function DimPage()
{
    const objDimmerImage = document.getElementById('busy');
    const arrWindowGeometry = GetWindowGeometry();
 
    // Check whether a vertical scrollbar is visible
    if ( ( window.innerWidth - document.body.clientWidth ) > 25 )
    {
	// If so, subtract width of scrollbar from image width in order to 
	// avoid a horizontal scrollbar to appear...
	objDimmerImage.width = arrWindowGeometry[0] - 17;
	// ...and extend its height to the document height
	objDimmerImage.height = document.body.clientHeight + 25;
    }
    else
    {
	// ... else scale to inner window size
	objDimmerImage.width = arrWindowGeometry[0];
	objDimmerImage.height = arrWindowGeometry[1];		
    }
 
    objDimmerImage.style.left = "0px";
    objDimmerImage.style.top = "0px";
    objDimmerImage.style.zIndex = "50";
    objDimmerImage.style.opacity = "0.7";
}

The corresponding function to fade out the curtain.

JavaScript

function UndimPage()
{
    const objDimmerImage = document.getElementById('busy');
    const objSpinnerImage = document.getElementById('spinner');
 
    objDimmerImage.style.opacity = "0";
 
    objSpinnerImage.style.visibility = "hidden";
    objSpinnerImage.style.zIndex = "-1";
 
    // Delay sending dimmer to back and resetting to original size
    jsTimeout = setTimeout
    (
	function()
	{
	    objDimmerImage.style.zIndex = "-1";
	    objDimmerImage.width = "400px";
	    objDimmerImage.height = "300px";
	}
 
	, 500
    );
}

The confirmation box is centered on the window using a generic function

JavaScript

function PositionElementAtCenter( strElementName )
{
    const objElement = document.getElementById( strElementName );
 
    // Calculate element position at center of window considering a scroll position
    let intXPositionPx = ( window.innerWidth / 2 ) - ( objElement.offsetWidth / 2 );
    let intYPositionPx = ( window.innerHeight / 2 ) - ( objElement.offsetHeight / 2 );
 
    // Position element
    objElement.style.left = intXPositionPx + "px";
    objElement.style.top = intYPositionPx + "px";
}

Putting it all together, a function can be compiled which triggers fading in the curtain and the box.

JavaScript

function FadeInConfirmation( strMessage, strOnclickAction )
{
    const ConfirmationDivision = document.getElementById( "div_confirmation" );
    const ConfirmationParagraph = document.getElementById( "p_confirmation" );
    const ConfirmationButton = document.getElementById( "button_confirmation" );
    ConfirmationParagraph.innerHTML = strMessage;
 
    // Optional onclick action to overwrite the default one (close the box)
    if ( strOnclickAction )
    {
	ConfirmationButton.setAttribute( "onclick", strOnclickAction );
    }
 
    DimPage();
 
    PositionElementAtCenter( "div_confirmation" );
 
    // Fade in
    ConfirmationDivision.style.visibility = "visible";
    ConfirmationDivision.style.opacity = "0.95";
}

Once the button is clicked, the following function fades out the box and the curtain.

JavaScript

function FadeOutElement( strElementName )
{
    var objElement = document.getElementById( strElementName );
 
    objElement.style.opacity = "0";
 
    // Delay hiding the division in order to await fading to be finished
    jsTimeout = setTimeout
    (
        function()
        {
            objElement.style.visibility = "hidden";
        }
 
        , 300
    );
 
    UndimPage();
}

Summary

Compositions of various animated elements take some behavioral JavaScript code to be implemented, but if variable values are used wherever adequate, the respective maintenance effort remains low.

You can test the result in the Housekeeping demo instance trying to copy a unique entry like a city.

Leave a comment

0 Comments.

Leave a Reply

( Ctrl + Enter )