{"id":138,"date":"2013-08-15T04:03:40","date_gmt":"2013-08-15T04:03:40","guid":{"rendered":"http:\/\/reichartonline.de\/?page_id=138"},"modified":"2025-01-11T22:39:35","modified_gmt":"2025-01-11T22:39:35","slug":"confirmation-boxes","status":"publish","type":"page","link":"https:\/\/reichartonline.de\/?page_id=138","title":{"rendered":"Confirmation Boxes"},"content":{"rendered":"

Introduction<\/strong><\/p>\n

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.<\/p>\n

\"Confirmation<\/a>

Confirmation Box<\/p><\/div>\n

<\/div>\n

The HTML part<\/strong><\/p>\n

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.<\/p>\n

The box itself contains a division element that encapsulates a paragraph and the confirmation button.<\/p>\n

HTML<\/p>\n

<img id=\"confirmation_box\" src=\"path_to_box_image\">\n<img id=\"busy\" src=\"path_to_curtain_image\">\n\n<div name=\"div_confirmation\" id=\"div_confirmation\">\n    <p name=\"p_confirmation\" id=\"p_confirmation\"><\/p>\n    <input type=\"button\" name=\"button_confirmation\" id=\"button_confirmation\" value=\"Continue\" onclick=\"javascript:FadeOutElement( 'div_confirmation' );\">\n<\/div><\/pre>\n
Generating this code using your preferred language, captions, titles etc. may be set to variable values e.g. to enable national language support.<\/p>\n
The CSS part<\/strong><\/p>\n
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.<\/p>\n
The division takes some more initial styling with sizing, borders and shadow.<\/p>\n
CSS<\/p>\n
img.dimmer\n{\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 0.3s linear;\n}\n\ndiv.confirmation\n{\n    z-index: 60;\n    position: absolute;\n    width: 200px;\n    height: 80px;\n    background-color: #FFFFFF;\n    padding: 10px;\n    text-align: center;\n    white-space: pre-wrap;\n    border-top: 2px solid silver;\n    border-bottom: 2px solid silver;\n    border-left: 2px solid silver;\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n    box-shadow: 10px 10px 5px #888;\n    visibility: hidden;\n    opacity: 0;\n    transition: visibility 0.3s linear, opacity 0.3s linear;\n}<\/pre>\n
The JavaScript part<\/strong><\/p>\n
In order to let the confirmation box appear, three steps are required<\/p>\n