Custom Modal popup

Css : 

.ModalPopupStyle{background-color: #FFFFFF;}
        .modalBackground
        {
            background-color: Black;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
        .RoundedCornerTop_Left
        {
            background-image: url(newimages/top_left.png);
            width: 10px;
            height: 21px;
            background-repeat: no-repeat;
        }
        .RoundedCornerBottom_Left
        {
            background-image: url(newimages/bottom_left.png);
            width: 10px;
            height: 10px;
            background-repeat: no-repeat;
        }
        .RoundedCornerBottom_Right
        {
            background-image: url(newimages/bottom_right.png);
            width: 21px;
            height: 10px;
            background-repeat: no-repeat;
        }

Javascript:

function ShowModalPopup(div) {
            $("modalbackgroundElement").style.width = "1261px"; $("modalbackgroundElement").style.position = "fixed"; $("modalbackgroundElement").style.left = "0px"; $("modalbackgroundElement").style.top = "0px"; $("modalbackgroundElement").style.zIndex = "10000"; $("modalbackgroundElement").style.width = screen.width + "px"; $("modalbackgroundElement").style.height = screen.height + "px"; var w = (getWindowWidth() - document.getElementById(div).style.width.substring(0, document.getElementById(div).style.width.indexOf("px"))) / 2; var h = (getWindowHeight() - document.getElementById(div).style.height.substring(0, document.getElementById(div).style.height.indexOf("px"))) / 2 + document.body.scrollTop; $(div).style.top = h + "px"; $(div).style.left = w + "px"; $(div).style.display = "block"; $("modalbackgroundElement").style.display = "block"; $("divBack").style.top = $(div).style.top; $("divBack").style.left = $(div).style.left; $("divBack").style.width = $(div).style.width; $("divBack").style.height = $(div).style.height; $("divBack").style.zIndex = "10001"; $("divBack").style.position = "fixed"; $("divBack").style.margin = "10px"; $("divBack").style.display = "none"; poll_div = div; poll_left = w; poll_top = h;
            var myPageY = 0;
            if (document.all) { myPageY = document.documentElement.scrollTop; }
            else { myPageY = window.pageYOffset; }
            poll_h = myPageY;
            h = (getWindowHeight() - document.getElementById(div).style.height.substring(0, document.getElementById(div).style.height.indexOf("px"))) / 2;
            $(div).style.top = (h) + "px";
            return false;
        }
        function $(id) { if (id == "") { return null; } else { return document.getElementById(id); } }

        function getWindowHeight() {
            var windowHeight = 0; if (typeof (window.innerHeight) == 'number') { windowHeight = window.innerHeight; }
            else {
                if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; }
                else { if (document.body && document.body.clientHeight) { windowHeight = document.body.clientHeight; } }
            }
            return windowHeight;
        }
        function getWindowWidth() {
            var windowWidth = 0; if (typeof (window.innerWidth) == 'number') { windowWidth = window.innerWidth; }
            else {
                if (document.documentElement && document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; }
                else { if (document.body && document.body.clientWidth) { windowWidth = document.body.clientWidth; } }
            }
            return windowWidth;
        }

HTML:

<div id="divBack" style="background-color: #000000; position: absolute; z-index: 100001;">
    </div>
    <div id="modalbackgroundElement" class="modalBackground">
    </div>

<div id="divModal" style="display: none; position: fixed; z-index: 100002; width: 275px;
        height: 200px;">
        <table cellpadding="0" cellspacing="0" border="0" width="275">
            <tr valign="bottom">
                <td class="RoundedCornerTop_Left" width="10px" height="21px">
                </td>
                <td style="background-image: url(newimages/space_cut12.png); background-repeat: repeat-x;
                    padding-right: 15px" valign="bottom" width="254" align="right">
                    <span id="required">* </span><span class="require23">Required fields</span>
                </td>
                <td valign="bottom" width="21">
                    <a href="#" style="text-decoration: none" onclick="javascript:return CloseContactForm();">
                        <img src="newimages/close_btn_16.png" alt="close" border="0" style="vertical-align: bottom"
                            width="21" height="21" /></a>
                </td>
            </tr>
            <tr valign="top" style="width: 254">
                <td colspan="3" class="ModalPopupStyle">
                    <uc1:TaskDetail ID="ContactDetails1" runat="server" strValue="2" />
                </td>
            </tr>
            <tr>
                <td class="RoundedCornerBottom_Left">
                </td>
                <td style="width: 254px; background-color: #fff">
                </td>
                <td class="RoundedCornerBottom_Right">
                </td>
            </tr>
        </table>
    </div>