Here is the basic code. First, I make a wrapper with the ID “popUp”. Inside I add a fixed div with 100% width, 100% height and a transparent background using rgba(0, 0, 0, 0.5). In the rgba code the first 3 spaces set the color (rgb) and the last space sets the opacity (1 being full opacity). So now I have a dark transparent background. Next I add the pop up box/modal. I give this a height and width. I set the top and left attributes to 50%. Then I give a negative value for the top and left margins. I set these to minus half of the width and half of the height of the box. Width = minus 300px/2 (-150px). And the same with the top.

CSS:

#popUp {
  display: none;
}
#popUpBg {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
top: 0;
left: 0;
display: block;
}

#popUpBox {
display: block;
position: fixed;
width: 300px;
height: 250px;
top: 50%;
left: 50%;
margin: -125px 0 0 -150px;
background: #FFFFFF;
border: solid 3px #ed1c24;
z-index: 20;
text-align: center;
box-shadow: 0 0 20px #222222;
}

#popUpBox p {
font-size: 2.2em;
font-weight: bold;
padding: 40px 20px;
line-height: 1.2;
margin: 0;
}

#popUpBox a.button {
font-size: 1.4em;
font-weight: bold;
background: #ed1c24;
padding: 10px 30px;
border-radius: 5px;
color: #FFFFFF;
text-decoration: none;
display: inline-block;
}

HTML:

<div id="popUp">
  <div id="popUpBg">&nbsp;</div>
  <div id="popUpBox">
    <p>Important Message...</p>
    <a id="popUpOk" class="button" href="javascript:;">OK</a>
  </div>
</div>
<a class="openPopUp" href="javascript:;">Open Pop Up</a>

Lastly, I add some jQuery to animate the box. When the page loads the code adds onclick events to the pop up background, the ok/close button and the “Open Pop Up” link.

jQuery:

$(document).ready(function() {
  $(".openPopUp").click(function() {
    $("#popUp").show()
  });
  $("#popUpBg").click(function() {
    $("#popUp").hide()
  });
  $("#popUpOk").click(function() {
    $("#popUp").hide()
  });
});

See a demo on Fiddle