coolx.net

Programming

No.

817

Name.

swindler

Subject.

Layer 띄울때 뒷배경 Dimmed 처리하는 방법

Main Cate.

CSS

Sub Cate.

Date.

2021-02-22 11:33

Hit.

1166 (121.134.199.74)

File.

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)});

[바로가기 링크] : http://coolx.net/cboard/develop/817


[Modify] [Delete]		[Reply] [List]