Jquery Всплывающее окно с затемнением фона

<!doctipe html/>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>

function open_pop_up(box) {
    $("#overlay").show();
    $(box).center_pop_up();
    $(box).show(500);
}

function close_pop_up(box) {
    $(box).hide(500);
    $("#overlay").delay(550).hide(1);
}

$(document).ready(function(){

    jQuery.fn.center_pop_up = function(){
        this.css('position','absolute');
        this.css('top', ($(window).height() - this.height()) / 2+$(window).scrollTop() + 'px');
        this.css('left', ($(window).width() - this.width()) / 2+$(window).scrollLeft() + 'px');
    }

});
</script>

<style>
#overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  opacity: 0.7;
  z-index: 9000;
  width: 100%;
  height: 100%;
  display: none;
}

#pop-up {
  width: 500px;
  height: 200px;
  border: 1px solid #e8e8e8;
  background: #fdfdfd;
  display: none;
  z-index: 9001;
}

span, p {
  cursor: pointer;
}
</style>
</head>
<body>
    <span onclick="open_pop_up('#pop-up');">Открыть</span>
    <div id="pop-up">
        <p onclick="close_pop_up('#pop-up');">Закрыть</p>
    </div>
    <div id="overlay"></div>
</body>
</html>