💫 03.17. 팝업창에 대한 문제점

문제점

시도해본것들

해결

알게된 점 

 

1.  문제점

아래에 위치한 멤버 카드를 클릭하면 페이지가 전체적으로 상단으로 이동한 후 상세페이지가 열린다.

(꼭 같은 위치에서만 열리고 있다.)

 

 

2. 시행착오

 .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 700px;
            height: 400px;
            border: 1px solid rgb(102, 102, 102, 0.1);
            border-radius: 5px;
            box-shadow: 3px 3px 10px rgb(102, 102, 102, 0.1);
            overflow: hidden;
            background-color: #fff;
        }

 

 

 

1) 처음에 fixed 태그 때문에 위로 올라간다고 생각했고, absolute로 바꿔주면 작동할 것이라 생각했는데 작동이 안된다.

2) 처음에는 이 태그에만 absolute를 시도하다가 보니 fixed를 여기저기 많이 사용했다.

(.popup을 감싸고 있는 popup-wrap이 같이 fixed 속성을 가지고 있어서 그런가? )

모든 fixed를 찾아서 한꺼번에 absolute 로 수정해봤다. 그랬더니 모양이 망가졌다.

 

 

 

지금 팝업이 띄워지는 방식과

팝업이 만들어진 구조를 생각해봐야겠다.

지금 팝업 구조는

(껍데기) <---- (이 껍데기를 공유하는 3개의 팝업 html)(  )(  )

팝업은 라우터로 각 멤버의 디테일 페이지에 ifram 태그로 붙여져 있다.

head에 연결 제대로 잘 되었는지도 확인 해봐야겠다.

 

 

<div class="popup-wrap popupd-wrap" id="popupd">
            <div class="popup">
                <div class="popup-body">
                    <button id="close_popupd" class="close_popup_btn close_popupd_btn">
                        X
                    </button>
                    <iframe src="" id="popupd_iframe" class="iframe"></iframe>
                </div>
            </div>
        </div>

 

 

위 태그의 iframe 태그 안으로

아래에 있는 html 이 경우에 수에 따라서 들어간다.

(아래와 같은 팝업창이 총 3개 있음)

 

 

<div class="wrap">
        <div class="popup_detail">
            <div class="popup_contents">
                <div class="left">
                    <div class="photo">
                        <img id="image_url" class="image_box" src="https://i.postimg.cc/TwPvd3cg/no-image.png" alt="">
                    </div>
                </div>
                <div class="right">
                    <div class="right_title">
                        <img id="profile_img" src="/static/planet_01.png" class="color" style="border-radius: 100%;">
                        <p id="name" class="name">.</p>
                    </div>
                    <div class="right_text">
                        <p id="title" class="ce_title">.</p>
                        <p id="text" class="ce_txt">.
                        </p>
                        <p id="time" class="ce_url">.</p>
                    </div>
                    <button id="edit" class="popup_submit_btn">관리</button>
                </div>
            </div>
        </div>
    </div>

 

 

 

 

3. 해결방법

4. 알게된 점

 

해결법과 알게된 점은 계속 시도하여 업데이트 하기로..