JavaScript popup 계단식 배치

기록지·2021년 8월 24일
0

1.팝업 창 배치값 설정 & function(getPopOption) 생성
getPopOption function에 내가 넣고자하는 초기값(생성할 팝업창의 폭과 높이)을 넣어준다.(시점중요!!!!)
getPopOption(150,100,rsData.room_no)

2. 파라미터로 값을 가져온다.
getPopOption = function(newTop, newLeft, num){
으로 값을 가져온 것을 확인 후

3. 계단식 배치
1) 해당하는 div class 의 length 가 1 이상일 경우
if($('.messengerChat').length > 1){
2). body에서 해당 div class을 찾고 그 안에 css 설정값을 변경해준다.
$('body').find('.messengerChat_'+num).css(
3). 초기값(초기 css 위치 값)+ 50+ 길이값 + 'px' 을 해주면 해당 div class 값이 변하게 된다.
'top': m$.standardPosition.top + 50 * ($('.messengerChat').length - 1) + "px",
->m$.standardPosition 값(초기 css 설정 값)을 전역변수에 넣어준다.
4). 처음 위치값 전역변수에 넣어주기
m$.standardPosition 값 설정 -> 처음 배열의 위치값(offset())
left : $(".messengerChat").first().offset().left
top: $(".messengerChat").first().offset().top

💬 전체 소스 ( getPopOption())

		getPopOption = function(newTop, newLeft, num){
			//console.log("newTop, newLeft, num",newTop, newLeft, num)
			//console.log($('.messengerChat').length)
			//채팅방이 1개 이상일때 
			if($('.messengerChat').length > 1){
				//console.log("$('body').find('.messemgerChat_'+num)",$('body').find('.messengerChat_'+num))
				$('body').find('.messengerChat_'+num).css(
					{	
						// length 값이 1이상인 것에서 length 만큼 값을 곱해줌
						'top': m$.standardPosition.top + 50 * ($('.messengerChat').length - 1) + "px",
						'left': m$.standardPosition.left + 50 * ($('.messengerChat').length - 1) + "px"
					}
				)
			} else {
				m$.standardPosition = {
					// first()첫번째 , offset() 위치
					left : $(".messengerChat").first().offset().left,
					top : $(".messengerChat").first().offset().top
				}
			}
//			$('body').find('.messemgerChat_'+num).css({'top': newTop+50+'px', 'Left': newLeft+50+'px'})
//			console.log("getPopOption 들어옴 ")

참고) https://chocotaste.tistory.com/129

1개의 댓글

comment-user-thumbnail
2021년 8월 25일

대단쓰 점차 진짜진짜진짜진짜 지니어스가 되어가고 있어

답글 달기