light박스 css로 흉내내기

by 조쉬 posted Dec 22, 2016
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
<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>