배경색(투명) 깔고 위에 레이어 팝업 띄우기

갤러리는 플러그인을 이용하는게 낫겠고...한장정도 띄우는건 이걸 이용하던가...좀 더 응용해서 만들어보는것도 괜찮을듯.


$(document).ready(function(){

   $("#lay").hide()
   $("#layerBtn").click(function(){
    $('<div id="blind_box"></div>').css('opacity',0.3).appendTo('body');     
    $('#lay').fadeIn(300);    
    $('#lay').css('z-index', '100');        
   });
  
   $("#close").click(function(){
    $("#blind_box").remove()
    $('#lay').hide()
   });

   });



html {height:100%;}
 body {height:100%; padding:0; margin:0;}
 #layerBtn {cursor:pointer;}
 #lay {position:absolute; top:50%; left:50%; height:400px; width:500px; margin-top:-200px; margin-left:-250px; background:#fff; 
 text-align:left; z-index:160; }
 #lay span {display:block; position:absolute; right:5px; bottom:5px; cursor:pointer;}
 #blind_box {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; z-index:50;} 

<div id="lay">

  <p>dfwef</p>
  <span id="close">닫기</span>

 </div>

 <div id="layerBtn">레이어 테스트 열려라 팝업</div>