목록으로

레이어 팝업 문의 채택완료

웹메이킹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 2,106

답변 2

안녕하세요 스킨을 제작중에 잘 안되는 부분이 있어 이렇게 문의드립니다.

게시판 리스트에서 게시물을 클릭시 레이어팝업으로 출력하는 부분까지는 잘 되었습니다.

문제는 아래의 이미지처럼 최상단에 위치해 있다는 것입니다.

팝업창이 화면에 맞게 리사이징이 되어야 하는데 스타일이나, 스크립트를 이리저리 수정을 해봐도 잘 안되네요..

고수님들의 조언 및 해결방법 부탁드리겠습니다.

사용된 관련 코드는 아래와 같습니다.

view.ajax.php

</p>

<p><?php</p>

<p>include_once '../../../common.php';</p>

<p>include_once(G5_LIB_PATH.'/thumbnail.lib.php');</p>

<p> </p>

<p>$wr_id = $_POST['wr_id'];</p>

<p>$bo_table ="map";</p>

<p>$sql = "SELECT * FROM g5_write_".$bo_table." WHERE wr_id = '$wr_id' ";</p>

<p>$row = sql_fetch($sql);</p>

<p>$thumb = get_list_thumbnail($bo_table, $row['wr_id'], 425, 320, false, true);</p>

<p>?></p>

<p> </p>

<p><div class="popcommon"></p>

<p>    <div id="landView"></p>

<p>        <div class="inner"></p>

<p>            <div class="bar"></p>

<p>                <a href="#" class="btn">Button 1</a></p>

<p>                <a href="#" class="btn">Button 2</a></p>

<p>                <button></p>

<p>                   <svg xmlns="<a href="http://www.w3.org/2000/svg"" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg"</a> width="24" height="24" viewBox="0 0 24 24"></p>

<p>                     <path d="M12 3.75C8.82 3.75 6.25 6.32 6.25 9.5c0 1.93.63 3.53 1.59 4.74L12 20l3.16-5.76c.96-1.21 1.59-2.81 1.59-4.74 0-3.18-2.57-5.75-5.75-5.75zm0 8.5a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5z"/></p>

<p>                    </svg></p>

<p>                </button></p>

<p>            </div></p>

<p>            <div class="scr_area"></p>

<p> </p>

<p>            </div></p>

<p>            <div class="top_info"></p>

<p>                <div class="landImg swiper-container"></p>

<p>                    <ul class="swiper-wrapper"></p>

<p>                        <li class="swiper-slide"><img src="./img/image1.jpg" alt="Image 1"></li></p>

<p>                        <li class="swiper-slide"><img src="./img/image2.jpg" alt="Image 2"></li></p>

<p>                        <li class="swiper-slide"><img src="./img/image3.jpg" alt="Image 3"></li></p>

<p>                    </ul></p>

<p>                    <div class="swiper-pagination pager"></div></p>

<p> </p>

<p>                    <div class="badge_wrap"></p>

<p>                        <?php if ($row['wr_11']) { ?></p>

<p>                            <div class="badge black"><?php echo $row['wr_11']; ?></div></p>

<p>                        <?php } ?></p>

<p>                        <?php if ($row['wr_12']) { ?></p>

<p>                            <div class="badge black"><?php echo $row['wr_12']; ?></div></p>

<p>                        <?php } ?>  </p>

<p>                        <?php if ($row['wr_13']) { ?></p>

<p>                            <div class="badge"><?php echo $row['wr_13']; ?></div></p>

<p>                        <?php } ?>  </p>

<p>                    </div></p>

<p>                </div></p>

<p>// 중략</p>

<p>            <div class="btn_area"></p>

<p>                <button class="inq_btn">문의하기</button></p>

<p>                <a href="#"><i class="fa fa-phone"></i> 0000-0000</a></p>

<p>            </div></p>

<p>        </div></p>

<p>    </div></p>

<p></div></p>

<p>

script.js

</p>

<p>var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;</p>

<p> </p>

<p>$(document).ready(function(){</p>

<p>    $(".item_list_btn").click(function() {</p>

<p>        $(this).toggleClass("active");</p>

<p>        $(".item_list_wrap").toggleClass("mo").toggle();</p>

<p>        $("#landCont").toggleClass("mo")</p>

<p>    });</p>

<p> </p>

<p>    $(window).resize(function(){</p>

<p>        if(window.outerWidth <= 1024) {</p>

<p>            $("#landView.list_type").addClass("fix_pg");</p>

<p>            $("#inq_pop.list_type").addClass("fix_pg");</p>

<p>        } else if(window.outerWidth > 1024) {</p>

<p>            $("#landView.list_type").removeClass("fix_pg");</p>

<p>            $("#inq_pop.list_type").removeClass("fix_pg");</p>

<p>        }</p>

<p>    })</p>

<p>})</p>

<p> </p>

<p>let landViewSwiper = '';</p>

<p>function land_view(wr_id){</p>

<p>    $.ajax({</p>

<p>        url: g5_url+"/skin/board/test/view.ajax.php",</p>

<p>        type: 'POST',</p>

<p>        data: {</p>

<p>            "wr_id": wr_id  </p>

<p>        },</p>

<p>        async:false,</p>

<p>        success: function(data){</p>

<p>            $("#landView").remove();</p>

<p>            $('body').append(data);</p>

<p>            if(window.outerWidth <= 1024) {</p>

<p>                $("#landView.list_type").addClass("fix_pg");</p>

<p>                $("#inq_pop.list_type").addClass("fix_pg");</p>

<p>            } else if(window.outerWidth > 1024) {</p>

<p>                $("#landView.list_type").removeClass("fix_pg");</p>

<p>                $("#inq_pop.list_type").removeClass("fix_pg");</p>

<p>            }</p>

<p>// 이하생략</p>

<p>

이렇게 작성했습니다.

즐거운 주말 되세요~

#그누보드5 #php #javascript #레이어팝업

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

애드프로

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

    $(window).resize(function(){
        if(window.outerWidth <= 1024) {
            $("#landView.list_type").addClass("fix_pg");
            $("#inq_pop.list_type").addClass("fix_pg");
        } else if(window.outerWidth > 1024) {
            $("#landView.list_type").removeClass("fix_pg");
            $("#inq_pop.list_type").removeClass("fix_pg");
        }
    })

여기 나와있네요.

가로 크기에 따른 클래스 부여 부분입니다.

여기를 적당한 클래스 부여 후 css 단에서 처리하세요.

로그인 후 평가할 수 있습니다