Edit in JSFiddle

$(function(){
    $("#showPopup").click(function(){
    
        $(".middleLayer").toggle();
        $(".popup").toggle();
    });
    $("#closePopup").click(function(){
        $(".middleLayer").toggle();
        $(".popup").hide();
    });
    
    $( ".popup" ).draggable();
});

<a href="#" id="showPopup">Click here to see the popup</a>

<!-- This is middle grey back ground -->
<div class="middleLayer" style="display:none"></div>

<!-- This is actual popup-->
<div class="popup" style="display:none">

    <!--This is title box-->
    <div class="popupTitleBox" >
        <span class="popupTitleText">Add Title Here</span>
        <span style="float:right;"><a href="#" id="closePopup"> Close </a></span>
    </div> 
    
    <div class="popupText">
        Add HTML HERE
    </div>
</div>

.popup{
   background-color:#E6E9F2;
   position:absolute;
   min-height:300px;
   width:400px;
   border: solid 2px #B9EAF0;
   
   top:30%;
   left:30%;
   z-index: 1002;

/*for rounded corner works with chrome and mozila*/
-moz-border-radius: 15px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

}

.middleLayer {
   background-color:#111;
   opacity: 0.65;
   position:absolute;
   z-index: 1000; /*ooveeerrrr nine thoussaaaannnd*/
   top:0px;
   left:0px;
   width:100%;
   min-height:100%;
   overflow:auto;
}

.popupTitleBox{

background-color:#0089BF;   
height:30px; 
text-valign:center;
border: solid 1px #0089BF;
padding-left:5px;

}