[레이어팝업] 제자리에서 팝업열기

[레이어 팝업을 버튼을 클릭한 부모영역에서 바로 열기]

1. 팝업 html 영역을 아래와 같이 잡았다면 제자리에서 팝업열기가 가능함.

css position 값을 이용하여 화면에서 위치값 조절 가능

부모 : position:relative

자식 : position: absolute

개인적으로 불편한 점 ->  부모태그안에 자식태그(팝업)을 넣어줘야함

2. position : fixed를 사용하여 제자리 팝업 열기

2-1)

부모 : position:relative

자식 : position: fixed

2-2)

부모 : position 상관없음

자식 : position: fixed

단점 : 세로값이 정해진 크기에서만 fixed된 영역이 보여서 내용이 길면 스크롤이 안생김(내용물을 다 열람할수없음)

특히 모바일에선 fixed 이슈가 있어서 내용이 많은 popup에서 사용하기 어려움.

3. script 넣어서 위치 이동해주기

부모를 감싼 태그를 숨기고 해당영역에 자식영역(팝업)을 보여줬다가, 팝업을 닫을 때 다시 부모영역을 show해주기

클릭한 버튼의 부모영역을 확인할수있는 value값을 일일히 넣어준다. 귀찮,,,

자식 : position : absolute;

 예시 -   https://jsfiddle.net/jywoo/6y8onwgs/22/