Override window.alert with custom dialog JQuery

OverrideWindowAlert.css

.overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align:center;
    z-index: 200;
    background-color: rgba(0,0,0,0.5);
}   
.overlay .overlay-box {
    width: 450px;
    margin: 100px auto;
    text-align: center;
    padding: 10px;
}
.overlay .overlay-close {
    float:right;
    margin: 10px 15px 0px 0px;
}
#msg-box p.message {
    margin: 20px 10px;
    text-align: center;
}
#msg-box .btn {
    width: 100%;
}

OverrideWindowAlert.html

<div id="msg-box" class="overlay">
    <div class="overlay-box">
        <div class="content-block">
            <div class="row">
                <h2 class="title">Hey!</h2>
                <hr />
            </div>
            <div class="row">
                <p class="message"></p>
                <hr />
            </div>
            <div class="row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-4">
                    <button class="button2 btn btn-default">Cancel</button>
                </div>
                <div class="col-xs-4">
                    <div class="button1 btn btn-default">OK</div>
                </div>
            </div>
        </div>
    </div>
</div>

OverrideWindowAlert.js

$(function () {
    // Replace alert
    window.alert = function (message) {
        showDialog("Hey!", message, "OK", function()
        {
            closeDialog();
        });
    };
})


function showDialog(title, message, button1, button1Click, button2, button2Click)
{
    var msgBox = $('#msg-box'); 
    msgBox.find('p.message').html(message);
    msgBox.find('.title').html(title);
    if (button1)
    {
        msgBox.find('.button1').show();
        msgBox.find('.button1').html(button1);
        msgBox.find('.button1').off('click.dialog').on('click.dialog', button1Click);
    }
    else
    {
        msgBox.find('.button1').hide();
    }
    if (button2)
    {
        msgBox.find('.button2').show();
        msgBox.find('.button2').html(button2);
        msgBox.find('.button2').off('click.dialog').on('click.dialog', button2Click);
    }
    else
    {
        msgBox.find('.button2').hide();
    }
    showOverlay(msgBox);
}

function closeDialog()
{
    closeOverlay($("#msg-box"));
}

function showOverlay($overlay, html) {
    var box = $overlay.find('.overlay-box');
    if (html)
        box.html(html);
    $overlay.fadeIn(350);
}

function closeOverlay($overlay) {
    $overlay.fadeOut(350);
}