jquery 모달 팝업 구현 불투명 배경, 팝업 화면 중앙에 띄우기, 스크롤 없애기 보이기

 

jquery 모달 팝업 구현 불투명 배경, 팝업 화면 중앙에 띄우기, 스크롤 없애기 보이기

 

 

 

 

화면 중앙에 레이어 팝업을 띄우는 방법은 아래 Link를 참고하고

모달 팝업과 같이 불투명 뒷 배경을 구현해 보자.

 

Link : javascript 자바스크립트 레이어 팝업 화면 중앙에 띄우는 방법

 

우선 불투명 배경에 대한 스타일 설정을 한다.

 

<!-- 스타일 설정 -->

<style type="text/css">

.bgLayer {display:none;position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50); z-index:10;}  /* z-index가 10이다. 이보다 위에 보이기 위해선 팝을 이보다 크게 설정해야한다. */

</style>

<!-- //스타일 설정 -->

 

<!-- 불투명 배경 생성 함수 -->

function bgLayerOpen() {
    if(!$('.bgLayer').length) {
        $('<div class="bgLayer"></div>').appendTo($('body'));
    }
    var object = $(".bgLayer");
    var w = $(document).width()+12;
    var h = $(document).height();

    object.css({'width':w,'height':h}); 
    object.fadeIn(500);   //생성되는 시간 설정
}

<!-- //불투명 배경 생성 함수 -->

 

<!-- 불투명 배경 제거 함수 -->

function bgLayerClear(){
    var object = $('.bgLayer');

 

if(object.length) {
    object.fadeOut(500, function() {
    object.remove();

});

    }

}

<!-- //불투명 배경 제거 함수 -->

 

bgLayerOpen() 함수를 호출하면 불투명 화면이 되고

bgLayerClear() 함수를 호출하면 화면이 원래대로 돌아오는 것을 확인 할 수 있다.

 

하지만 이처럼 하면 화면 크기가 변할 시 이전 크기 만큼만 불투명 처리 되는 것을 확인 할 수 있다.

그래서 화면 사이즈가 변경 되면 불투명 레이어의 사이즈도 변경되도록 구현한다.

 

<!-- 화면 크기 변경 시 레이어 크기 변화 -->

$(function(){

$(window).resize(function() { //화면 크기 변할 시
    $('.bgLayer').css('width' ,  $(window).width() - 0 );
    $('.bgLayer').css('height' ,  $(window).height() - 0 );
});

});

<!-- //화면 크기 변경 시 레이어 크기 변화 -->

 

이렇게 해도 문제가 있다. 바로 스크롤. 만약 스크롤이 있다면

스크롤을 움직이면 아래 부분은 불투명 화면이 적용 되지 않는다.ㅋㅋ

 

그래서 불투명 배경 함수들에 스크롤을 숨기고 보이는 부분을 추가한다.

 

 

 

<!--스크롤 숨기는 부분 추가 -->

function bgLayerOpen() {
    if(!$('.bgLayer').length) {
        $('<div class="bgLayer"></div>').appendTo($('body'));
    }
    var object = $(".bgLayer");
    var w = $(document).width()+12;
    var h = $(document).height();

    object.css({'width':w,'height':h}); 
    object.fadeIn(500);   //생성되는 시간 설정
     $('html').css("overflow", "hidden");
}

<!--//스크롤 숨기는 부분 추가 -->

 

<!--스크롤 보이게하는 부분 추가 -->

function bgLayerClear(){
    var object = $('.bgLayer');

 

if(object.length) {
    object.fadeOut(500, function() {
    object.remove();

});

    }

    $('html').css("overflow", "scroll");

}

<!--//스크롤 보이게하는  부분 추가 -->

 

이제 완벽히 구현 된 듯 하다.

팝업이 뜨면 주위가 모두 불투명 처리되어 클릭을 못하게 되었다.

 

모달 팝업은 여러곳에 다양하게 사용되고 여기에 사용되는 기능들도 자주 사용되는 것들이니

잘 참고하여 두자.