Coolx World - Programming
Layer 띄울때 뒷배경 Dimmed 처리하는 방법 (CSS)
2021-02-22 11:33 - swindler
body, html에 스크롤을 없애는 법

.scrollStop {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}

$('html, body').addClass('scrollStop');
$('html, body').removeClass('scrollStop');

이렇게 처리하는 경우에는 scroll이 없어지면서, 화면 최상단으로 올라가는 현상이 생김


현재 위치를 유지한채로 띄우기 위해서는 다음과 같이 사용

$("body").css("overflow", "auto");
$("body").css("overflow", "hidden");

이 경우, 배경으로 사용할 layer가 현재 위치를 가득 채워야 하므로,
아래와 같이 positon을 fixed로 잡아야 함

#trendLayer .blind {
position: fixed;
top: 0;
left: 0; width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}


두번째 경우 레이어의 위치도 스크롤위치에 맞게 나와야 하므로,
$('#trendLayerGraph').css({'left':(($(window).width() - width ) / 2 + $(window).scrollLeft()), 'top':(($(window).height() - height) / 2 + $(window).scrollTop())});

scrollTop, scrollLeft 값을 더해야 함.


최상단으로 옮겨서 띄우는 경우에는 고려하지 않아도 됨
$('#trendLayerGraph').css({'left':(($(window).width() - width ) / 2), 'top':(($(window).height() - height) / 2)});



Copyright © 1999-2020, swindler.

  2HLAB   2HLAB_Blog   RedToolBox   Omil   Omil_Blog