[CSS] light박스 css로 흉내내기

  <style type="text/css">
    .black_overlay{
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index:1001;
      -moz-opacity: 0.8;
      opacity:.50;
      filter: alpha(opacity=50);
    }
    .white_content {
      display: none;
      position: fixed;
      top: 10%;
      left: 50%;
      margin-left: -231px;
      width: 462px;
      height: 478px;
      padding: 16px;
      border: 5px solid orange;
      background-color: white;
      z-index:1002;
      overflow: auto;
    }
  </style>

<script>

    $('#formname).click(function(){
      $('#light').show();
      $('#fade').show();
      var height = document.body.scrollHeight;
      $('#fade').css("height",height);
      $('#light').load("filename");
    });

</script>

.

.

.

.

<div id="light" class="white_content">
</div>
<div id="fade" class="black_overlay"></div>