Modal dialog window using Javascript and CSS

Add this function to your scripts. Call it from a click or other events like
button.onlick= function() { showModal("some content to be shown as modal dialog");

function showModal(txt) {
    var d = document.getElementById("xf_modal_window"); d && n.parentNode.removeChild(d); var n = document.createElement("div");
    n.id = "xf_modal_window", n.className = "modal"; var o = document.createElement("div");
    o.id = "er_div_modal_content", o.innerHTML = txt, n.appendChild(o); var t = document.createElement("input");
    t.type = "BUTTON", t.value = "close", t.onclick = function () { t.parentNode.parentNode.removeChild(n) }, n.appendChild(t), document.body.appendChild(n)
}

This to your CSS 

.modal {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 990;
    background-color: #808080;
    background: rgba(0, 0, 0, 0.4);
}

    .modal div {
        width: 300px;
        margin: 12% auto 50px auto;
        background-color: #fff;
        border: 1px solid #f8a56a;
        padding: 15px;
        text-align: center;
        background: rgba(0, 0, 0, 1);
        color: #fff;
        font-size: 1.1em;
    }

    .modal input {
        min-width: 150px;
        background-color: #808080;
        font-size: 0.9em;
        border: 1px solid #000000;
        border-radius: 4px;
        min-height: 22px;
        color: #e9e8e8;
        text-align: center;
        text-decoration: none;
    }