Custom Alert

https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial

by zerrax

HTML

<div id="dialog-overlay"></div>
<div id="dialog-box">
    <div>
        <div id="dialog-box-head"></div>
        <div id="dialog-box-body"></div>
        <div id="dialog-box-foot"></div>
    </div>
</div>

<h1>Document Title ...</h1>

<h2>Document Header ...</h2>

<button onclick="alert('This is just a test...')">Default Alert</button>
<button onclick="Alert.show('This is just a test...')">Custom Alert</button>
<button onclick="Alert.show('This is just another test...')">Custom Alert 2</button>
<hr />

<h3>Document content ...</h3>

<p id="post_1">Today is a lovely day ...
    <button onclick="Confirm.show('Delete Post?','delete_post','post_1')">Delete</button>
</p>
<p id="post_2">I like pickles ...
    <button onclick="Confirm.show('Delete Post?','delete_post','post_2')">Delete</button>
</p>
<button onclick="Alert.show('Hello World')">Custom Alert</button>
<hr />

<h4 id="status">Default Text</h4>

<button onclick="Prompt.show('Type some text:','changeText')">Change Text</button>
<button onclick="Prompt.show('Type a color name:','doStuff')">Do stuff</button>
<button onclick="Alert.show('Hello World')">Alert</button>

CSS

#dialog-overlay {
    display: none;
    opacity: 0.95;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #000;
    width: 100%;
    z-index: 100;
}
#dialog-box {
    display: none;
    position: fixed;
    background: #333;
   top: 50%;
    left: 0;

width: 100%;
    z-index: 101;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 4px 4px 3px 3px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 4px 4px 3px 3px rgba(0, 0, 0, 0.35);
    box-shadow: 4px 4px 3px 3px rgba(0, 0, 0, 0.35);
    border: 1px solid #000;
}
#dialog-box > div {
    background:#FFF;
    margin:8px;
    border: 1px solid #0045ff6b;
      -webkit-border-radius:7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
#dialog-box > div > #dialog-box-head {
    background: #FFF;
    font-size: 19px;
    padding: 10px;
    color: #fff;
   border-bottom: 1px solid #222;
    background: #162644e6;
}
#dialog-box > div > #dialog-box-body {
    background: #1626449e;
    padding: 20px;
    color: #000;
   // border: 1px solid #000;
}
#dialog-box > div > #dialog-box-foot {
    background: #162644e6;
    padding: 10px;
    text-align: right;
    border-top: 1px solid #222;
}

JavaScript

function CustomAlert() {
    this.show = function (dialog) {
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogOverlay = document.getElementById('dialog-overlay');
        var dialogBox = document.getElementById('dialog-box');

        dialogOverlay.style.display = "block";
        dialogOverlay.style.height = winH + "px";
       // dialogBox.style.left = ((winW / 2) - (550 / 2)) + "px";
        //dialogBox.style.top = "100px";
        dialogBox.style.display = "block";

        document.getElementById('dialog-box-head').innerHTML = "Acknowledge This Message";
        document.getElementById('dialog-box-body').innerHTML = dialog;
        document.getElementById('dialog-box-foot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
    }
    this.ok = function () {
        this.hide();
    }
    this.hide = function () {
        document.getElementById('dialog-box').style.display = "none";
        document.getElementById('dialog-overlay').style.display = "none";
    }
}

var Alert = new CustomAlert();

// =============================================================================================

function deletePost(id) {
    var db_id = id.replace("post_", "");
    // Run Ajax request here to delete post from database
    document.body.removeChild(document.getElementById(id));
}

function CustomConfirm() {
    this.show = function (dialog, op, id) {
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogOverlay = document.getElementById('dialog-overlay');
        var dialogBox = document.getElementById('dialog-box');

        dialogOverlay.style.display = "block";
        dialogOverlay.style.height = winH + "px";
       // dialogBox.style.left = ((winW / 2) - (550 / 2)) + "px";
     //   dialogBox.style.top = "100px";
        dialogBox.style.display = "block";

        document.getElementById('dialog-box-head').innerHTML = "Confirm that action";
       ...