Create a Pop Up Using JavaScript and CSS when click event

<div id="toPopup" style="background: none repeat scroll 0 0 #FFFFFF; border: 10px solid #ccc; border-radius: 3px 3px 3px 3px; color: #333333; display: none; font-size: 14px; left: 50%; margin-left: -402px; position: fixed; top: 20%; width: 800px; z-index: 2;">
    <div class="close" style="background: url('../images/close.png'); cursor: pointer; height: 30px; position: absolute; right: -27px; top: -24px; width: 30px;"></div>
    <span class="ecs_tooltip" style="background: none repeat scroll 0 0 #000000; border-radius: 2px 2px 2px 2px; color: #FFFFFF; display: none; font-size: 11px; height: 16px; opacity: 0.7; padding: 4px 3px 2px 5px; position: absolute; right: -62px; text-align: center; top: -51px; width: 93px;">Press Esc to close
        <span class="arrow" style="border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #000000; display: block; height: 1px; left: 40px; position: relative; top: 3px; width: 1px;"></span></span>
    <div id="popup_content" style="margin: 4px 7px;">

"Pop up content"
 </div>

</div>
<div class="loader" style="background: url('../images/Spinningloading.gif'); height: 32px; width: 32px; display: none; z-index: 9999; top: 40%; left: 50%; position: absolute; margin-left: -10px;"></div>
<div id="backgroundPopup" style="z-index: 1; position: fixed; display: none; height: 100%; width: 100%; background: #000000; top: 0px; left: 0px;"></div>

<script type="text/javascript">
    $(document).ready(function () {
        function Click() {
            loading(); // loading
            setTimeout(function () { // then show popup, deley in .5 second
                loadPopup(); // function show popup
            }, 500); // .5 second
            return false;

        }
        $("div.close").hover(
              function () {
                  $('span.ecs_tooltip').show();
              },
                            function () {
                                $('span.ecs_tooltip').hide();
                            }
               );

        $("div.close").click(function () {
            disablePopup();  // function close pop up
        });

        $(this).keyup(function (event) {
            if (event.which == 27) { // 27 is 'Ecs' in the keyboard
                disablePopup();  // function close pop up
            }
        });

        $("div#backgroundPopup").click(function () {
            disablePopup();  // function close pop up
        });
       
        function loading() {
            $("div.loader").show();
        }
        function closeloading() {
            $("div.loader").fadeOut('normal');
        }

        var popupStatus = 0;

        function loadPopup() {
            if (popupStatus == 0) { // if value is 0, show popup
                closeloading(); // fadeout loading
                $("#toPopup").fadeIn(0500); // fadein popup div
                $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
                $("#backgroundPopup").fadeIn(0001);
                popupStatus = 1; // and set value to 1
            }
        }

        function disablePopup() {
            if (popupStatus == 1) { // if value is 1, close popup
                $("#toPopup").fadeOut("normal");
                $("#backgroundPopup").fadeOut("normal");
                popupStatus = 0;  // and set value to 0
            }
        }

    
    });
</script>