4,475,840 th visitor since 2017.2.1 ( Today : 6565 )
Programming
No. 817
Name. swindler
Subject. Layer 띄울때 뒷배경 Dimmed 처리하는 방법
Main Cate. CSS
Sub Cate.
Date. 2021-02-22 11:33
Hit. 1171 (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



Name
Password
Comment
Copyright © 1999-2017, swindler. All rights reserved. 367,611 visitor ( 1999.1.8-2004.5.26 ), 2,405,771 ( -2017.01.31)

  2HLAB   2HLAB_Blog   RedToolBox   Omil   Omil_Blog