<!--HTML-->
<a class="myLinkModal" href="#">Click me</a>

<div id="myModal">
  <p>Контент</p>
  <span id="myModal__close" class="close">ₓ</span>
</div>
<div id="myOverlay"></div>

<style>
body {font-family: sans-serif;}
#myModal {
    width: 298px; height: 218px;
  margin: 0 auto;
  padding: 18px 9px;
    border-radius: 4px;
    background: #fafafa;
    position: ;
    top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
    display: none;
    opacity: 0;
    z-index: 38;
  text-align: center;
}
#myModal #myModal__close {
    width: 21px; height: 21px;
    position: absolute;
    top: 1px;   right: 11px;
    cursor: pointer;
    display: block;
  font-size: 29px;
}
#myOverlay {
    z-index: 37;
    position: relative;
    background-color: rgba(0,0,0,.7);
    width: 100%; height: 100%;
    top: 0; left: 0;
    cursor :pointer;
    display :none;
}

</style>

<script>
$(document).ready(function() {
    $('a.myLinkModal').click( function(event){
        event.preventDefault();
        $('#myOverlay').fadeIn(297, function(){
      $('#myModal') 
      .css('display', 'block')
      .animate({opacity: 1}, 198);
        });
    });

    $('#myModal__close, #myOverlay').click( function(){
        $('#myModal').animate({opacity: 0}, 198,
      function(){
        $(this).css('display', 'none');
        $('#myOverlay').fadeOut(297);
        });
    });
});
</script>