Here is a quick and dirty implementation of an alert box and a confirm box.
A working example can be found at http://hgsweb.de .
I hope that the documentation is sufficient enough to be of any help.
All you need is within the code below, just grab it and have fun.

Regards.

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>The alert and the confirm box demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>    
        <p> All sources you need are within this page </p>
             
        <div id='out'><b>The alert and the confirm box demo</div>       
        <button  onclick='myAlert("<h1>The Alert box</h1>You made it !")'>Show Alert Box</button>
        <button  onclick='myConfirm("<h2>Please confirm</h2>", callYes, callNo)'>Show Confirmation Dialog</button>       
        <p>Once a dialog pops up you should no longer be able to press any of the buttons above</p>
    </body>
</html>
<script>
    /*
     * One way to use this 
     */
    theDialogs = myModalDialogs();
    myAlert = theDialogs.myAlert;
    myConfirm = theDialogs.myConfirm;

    function callYes() {
        document.getElementById('out').innerHTML = '<b style="color:green">The confirm box YES button was pressed';
    }
    function callNo() {
        document.getElementById('out').innerHTML = '<b style="color:red">The confirm box NO button was pressed';
    }
    /***********************************
     * here comes the implementation
     ***********************************/
    function myModalDialogs() {

        var
                vail, // will hold a css class
                vailInnerBox, //will hold a css class
                cdDiv, // div for confirm dialog to hold the HTML below
                confirmDialog = '<div  id="hgsmodc_vail" class="vailInnerBox" >' +
                '<span  id="hgsmodc_bbb">you should never see this</span><hr>' +
                '<div style="text-align:center">' +
                '<button id="modal_confirm_yes" >Yes</button>' +
                '<button id="modal_confirm_no" >No</button>' +
                '</div>' +
                '</div>',
                alDiv, //div for alert box to hold HTML below
                alertDialog = '<div  id="hgsmoda_vail" class="vailInnerBox">' +
                ' <span style="float:right;color:#ff6200;font-weight:bold">Alert<br></span>' +
                '<hr style="clear:both">' +
                '<span  id="hgsmoda_bbb"> you should never see this </span><hr>' +
                '<div style="text-align:center"><button>OK</button> </div>';

        /*
         * If you want to use other classes then vail 
         * and vailInnerBox just use them.
         * 
         * we create the class .vail.
         * A DIV with this class will cover the entire window 
         * to prevent any action
         */
        vail = document.createElement('style');
        vail.type = 'text/css';
        vail.innerHTML = ' .vail{ z-index:1000; position:absolute;top:0px;left:0px; width:100%; height:100%;display:none;}';
        document.getElementsByTagName('head')[0].appendChild(vail);
        /*
         * we create the class .vailInnerBox.
         * A DIV with this class will sit on top of .vail
         * to allow interaction with the user
         */
        vailInnerBox = document.createElement('style');
        vailInnerBox.type = 'text/css';
        vailInnerBox.innerHTML = '.vailInnerBox{width:auto;background:#dddbd1; border: 1px solid rgb(88, 121, 224);z-index:2000;' +
                ' position:fixed;top:200px;left:400px;box-shadow: rgb(154, 163, 228) 16px 16px 16px;border-radius: 5px;padding:8px; }';
        document.getElementsByTagName('head')[0].appendChild(vailInnerBox);
        /*
         * We create the confirm dialog
         */
        cdDiv = document.createElement('DIV');
        cdDiv.id = 'hgsmodc_aaa';
        cdDiv.className = 'vail';
        cdDiv.innerHTML = confirmDialog;
        /*
         * We create the alert dialog
         */
        alDiv = document.createElement('DIV');
        alDiv.id = 'hgsmoda_aaa';
        alDiv.className = 'vail';
        alDiv.innerHTML = alertDialog;
        /*
         * we append the dialogs to the BODY
         */
        document.body.appendChild(cdDiv);
        document.body.appendChild(alDiv);

        function gebi(id) {
            return document.getElementById(id);
        }
        /*
         * The action within the alert box is just an OK button
         * In fact if you click anywhere within the alert box it will
         * disapear.
         */
        function myAlert(a_text) {
            var vail = gebi('hgsmoda_vail');
            if (vail) {
                gebi('hgsmoda_aaa').style.display = 'block';
                vail.style.display = 'block';
                gebi('hgsmoda_bbb').innerHTML = a_text.replace(/\n/gi, "<br>");
                vail.onclick = function() {
                    gebi('hgsmoda_aaa').style.display = 'none';
                };
            } else {
                alert(a_text); // fall back
            }
            return;
        }
        /*
         * The action within the confirm box 
         * If the Yes button is pressed the callYes function is executed
         * If the No button is pressed the  callno function is executed
         * In both cases the dialog will disapear.
         */
        function myConfirm(a_text, callYes, callNo) {
            var vail = gebi('hgsmodc_vail'), ret;
            if (vail) {
                gebi('hgsmodc_aaa').style.display = 'block';
                vail.style.display = 'block';
                gebi('hgsmodc_bbb').innerHTML = a_text.replace(/\n/gi, "<br>");
                gebi('modal_confirm_yes').onclick = function() {
                    gebi('hgsmodc_aaa').style.display = 'none';
                    callYes();
                };
                gebi('modal_confirm_no').onclick = function() {
                    gebi('hgsmodc_aaa').style.display = 'none';
                    callNo();
                };
            } else {
                ret = confirm(a_text);  // fall back
                if (ret) {
                    callYes();
                } else {
                    callNo();
                }
            }
            return;
        }
        /*
         * Here we  reveal the dialog /functions to the caller
         */
        return {
            myAlert: myAlert, //(text)
            myConfirm: myConfirm //(text,callYes,callNo)
        };
    }
</script>