레이어 팝업 문의 채택완료
웹메이킹
2년 전
조회 2,098
안녕하세요 스킨을 제작중에 잘 안되는 부분이 있어 이렇게 문의드립니다.
게시판 리스트에서 게시물을 클릭시 레이어팝업으로 출력하는 부분까지는 잘 되었습니다.
문제는 아래의 이미지처럼 최상단에 위치해 있다는 것입니다.
팝업창이 화면에 맞게 리사이징이 되어야 하는데 스타일이나, 스크립트를 이리저리 수정을 해봐도 잘 안되네요..
고수님들의 조언 및 해결방법 부탁드리겠습니다.
사용된 관련 코드는 아래와 같습니다.
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>이렇게 작성했습니다.
즐거운 주말 되세요~
댓글을 작성하려면 로그인이 필요합니다.
답변 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 단에서 처리하세요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
웹메이킹
2년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
즐거운 주말 되세요