A CodePen by Sergii Rudchyk. Modal Window

index.html

<ul>
  <li>
    <span class="zp-pin-edit zp-pin-edit-js" alt="1">Открыть окно 1</span>
  </li>
  <li>
    <span class="zp-pin-edit zp-pin-edit-js" alt="2">Открыть окно 2</span>
  </li>
</ul>
<div class="block">
<!-- Popupper1 --> 
<div class="popupper1 popupper">
  <div class="popupper_block">
    <div class="control-button zp-close-js">Закрыть</div>
    Это модальное окно детка)<br />
    <span class="zp-pin-edit-small zp-pin-edit-js" alt="2">Открыть окно 2</span>
  </div>
</div>
<!-- /Popupper1 -->
<!-- Popupper2 --> 
<div class="popupper2 popupper">
  <div class="popupper_block">
    <div class="control-button zp-close-js">Закрыть</div>
    Это второе модальное окно детка)<br />
    Да-да, это оно!<br />
    <span class="zp-pin-edit-small zp-pin-edit-js" alt="1">Открыть окно 1</span>
  </div>
</div>
<!-- /Popupper2 -->
</div>

script.js

  var key = false;
  $('.zp-pin-edit-js').click(function(){
    var modalLink = $(this).attr("alt");
    $('.block').show().css({height:$(window).height(), width:($(window).width())});
    $('.popupper'+modalLink).show().css({top:($(window).height()/2-$('.popupper'+modalLink).height()/2), left:($(window).width()/2-$('.popupper'+modalLink).width()/2)}).siblings(".popupper").hide(); 
  key = false; 
  })
  $('.zp-close-js').click(function(){
            $('.popupper').hide();
            $('.block').hide();
            key = false;
  })
 $(this).keydown(function(eventObject){
      if (eventObject.which == 27)
        $('.popupper').hide();
    	$('.block').hide();
    	key = false;
    });      
 $(document).click(function(event) {
    if(key &&            $(event.target).closest(".popupper").length == 0){
          $('.popupper').hide();
          $('.block').hide();
          key = false; 
          return;
}
key = true;
});
  

style.sass

@import "compass"
ul
  padding: 20px
.zp-pin-edit
  display: inline-block
  padding-bottom: 15px
  cursor: pointer
.zp-pin-edit-small
  display: inline-block
  padding-top: 15px
  cursor: pointer
  font-size: 12px
.popupper
  display: none
  position: absolute
  text-align: center
  font-size: 20px
  background: white
  +border-radius(15px) 
.control-button
  font-size: 11px
  cursor: pointer
  text-align: right
  margin-botoom: 15px
  &:hover
    text-decoration: underline
.block
  display: none
  background: rgba(0,0,0,0.5)
  position: absolute
  top: 0
  left: 0
.popupper_block
  padding: 50px