[HTML] Layer popup + dimmed 처리 소스

아래 소스는 직접 사용중인 소스입니다.

붙이셔서 마음대로 사용하셔도 괜찮습니다 ^^

<style>

   .layer2 {
      position: fixed;
      _position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
   }

   .layer2 .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: .5;
      filter: alpha(opacity=50);
   }

   .layer2 .pop-layer2 {
      display: block;
   }

   .pop-layer2 {
      display: none;
      position: absolute;
      top: 15%;
      left: 34%;
      width: 603px;
      height: 639px;
      background-color: #fff;
      border: 5px solid #3571B5;
      z-index: 10;
   }

   .pop-layer2 .pop-container2 {
      padding: 20px 25px;
   }

   .pop-layer2 p.ctxt {
      color: #666;
      line-height: 25px;
   }

   .pop-layer2 .btn-r {
      width: 223px;
      margin: 10px 0 20px;
      padding-top: 10px;
      border-top: 1px solid #DDD;
      text-align: right;
   }
</style>

<form id="EditForm" method="post">
   <input type="hidden" name="ID" id="ID" value="ID" />

   <div class="layer2" id="layerWarp">
      <div class="bg"></div>
      <div id="layer2" class="pop-layer2">
         <div class="pop-container2">

            <div style="text-align:left; height:30px; width:100%; margin-bottom:10px;">
               <div style="font-size: 20px"><strong>&lt; 개인정보 수집•이용 동의서&gt;</strong> </div>
            </div>
            <div style="border:solid 1px; margin-bottom:15px">
               <span>개인정보의 수집 및 이용에 대한 동의</span>
               <br />
               <br />
               <p>
                  <span style="font-weight:bold">[선택적 수집 및 이용]</span><br />
                  - 수집항목:  성명, 연락처, 소속, 이메일<br />
              
               </p><br />
               <p>
                  <span style="font-weight:bold">[보유 및 이용기간]</span><br />
                  &nbsp;「개인정보보호법」 등 관계 법령의 규정에 따라 귀하의 개인정보를 보존할 의무가 있는 경우가 아닌 한,
                  귀하의 온라인(홈페이지) 회원 및 학회 회원 탈퇴 시 까지 귀하의 개인정보를 보유 및 이용합니다.
               </p><br />
               <p>
                  <span style="font-weight:bold">[동의거부권 및 불이익]</span><br />
                 
                  <br />
                  <br />
                 
               </p>
            </div>
            <div>
               
            </div>
            <div style="text-align:center; margin-top:18px;">
               <label><input type="checkbox" value="" name="" id="checkedAll" onchange="checkAll()" /> 전체 선택</label>
               <label><input type="checkbox" value="Y" name="nameAgree" id="nameAgreeCheck" /> 성명</label>
               <label><input type="checkbox" value="Y" name="companyAgree" id="companyAgreeCheck" /> 소속</label>
               <label><input type="checkbox" value="Y" name="mailAgree" id="mailAgreeCheck" /> 이메일</label>
               <label><input type="checkbox" value="Y" name="phoneAgree" id="phoneAgreeCheck" /> 연락처</label>
            </div>
            <div class="alignC" style="margin-top:20px;">
               <a href="javascript:void()" onclick="agree('Y')"><img src="/images/btn/btn_agree.png" alt="동의함"></a>
               <a href="javascript:void()" onclick="agree('N')"><img src="/images/btn/btn_disagree.png" alt="동의하지 않음"></a>
            </div>
         </div>
      </div>
   </div>
</form>

function agree(value){
    if(value == 'n'){
        $('#layerWarp').css('display','none');
   }else{
        $('#layerWarp').css('display','block');
   }
}