애트리뷰트 팝업 창 띄우기

애트리뷰트 이용해서 레이어 팝업창 띄우기

---

팝업창 띄우기 소스 

    
    



    

        
        

            팝업 
            
        
        
        
        

            
            팝업 띄우기 
        
        
    
    





    

        
        

            팝업 2
            
        
        
        
        

            팝업 띄우기 2
        
        
        
    
    

/* 팝업 */
.pop {height:100%; height:100%; min-height:100%;}
.popup-wrap {display:none; width:100%; background:#ccc;}

/* 팝업 공통 */
.popup-wrap .popup-area { background:#fff; position:fixed; left:50%; top:50%; z-index:2; transform: translate(-50%, -50%);}
.popup-wrap .pop-title {padding:15px 30px 20px; background:#685e52; color:#fff; font-size:20px; position:relative}
.popup-wrap .pop-title .pop-close {display:block; position:absolute; top:50%; right:20px; margin-top:-9px;  }
.popup-wrap .pop-content {padding:30px 30px 50px; box-sizing: border-box}
.popup-wrap .pop-content .new-date {position: relative; padding-bottom:20px; margin-bottom:20px; border-bottom:2px solid #e6e4e4}
.popup-wrap .pop-content .new-date .icon {display:block; padding:0 20px 0; height:26px; line-height:24px; background:#dfa62b; font-size:14px; color:#fff; position:absolute; right:0; top:0; border-radius:2px; }
.popup-wrap .pop-content .new-date .tit:before {display:inline-block; vertical-align: middle; content:""; margin-right:8px; width:23px; height:23px;}
.popup-wrap .pop-content .new-date .tit {font-size:16px; height:22px; line-height:18px; color:#000;}
.popup-wrap .btn-area {text-align:center}
.popup-wrap .dim {position:fixed;; top:0; left:0; background:#ccc; width:100%; height:100%; z-index:1; background: rgba(0, 0, 0, .5)}
.popup-wrap .pop-btn {border:1px solid #ccc;}

// 레이어 팝업 
function popup(){
    var $body = $(document.body),
        $openBtn = $('.pop-btn');
    if($openBtn.length == 0) {
        return; 
    }
    var $popupWrap = $('.popup-wrap'),
        $closeBtn = $('.pop-close');
    // 팝업 실행
    $openBtn.on('click', function(){
        $body.addClass('pop');
        var $popupWrap = $(this).attr('data-layerid');
        $($popupWrap).show();
    });
    // 팝업 닫기
    $closeBtn.on('click',function(){
        $body.removeClass('pop');
        $popupWrap.hide();
    });
}   
popup();

sub's

Blog