안녕하세요 스킨을 제작중에 잘 안되는 부분이 있어 이렇게 문의드립니다.
게시판 리스트에서 게시물을 클릭시 레이어팝업으로 출력하는 부분까지는 잘 되었습니다.
문제는 아래의 이미지처럼 최상단에 위치해 있다는 것입니다.
팝업창이 화면에 맞게 리사이징이 되어야 하는데 스타일이나, 스크립트를 이리저리 수정을 해봐도 잘 안되네요..
고수님들의 조언 및 해결방법 부탁드리겠습니다.
사용된 관련 코드는 아래와 같습니다.
view.ajax.php
Copy
<?php
include_once '../../../common.php';
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$wr_id = $_POST['wr_id'];
$bo_table ="map";
$sql = "SELECT * FROM g5_write_".$bo_table." WHERE wr_id = '$wr_id' ";
$row = sql_fetch($sql);
$thumb = get_list_thumbnail($bo_table, $row['wr_id'], 425, 320, false, true);
?>
<div class="popcommon">
<div id="landView">
<div class="inner">
<div class="bar">
<a href="#" class="btn">Button 1</a>
<a href="#" class="btn">Button 2</a>
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<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"/>
</svg>
</button>
</div>
<div class="scr_area">
</div>
<div class="top_info">
<div class="landImg swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><img src="./img/image1.jpg" alt="Image 1"></li>
<li class="swiper-slide"><img src="./img/image2.jpg" alt="Image 2"></li>
<li class="swiper-slide"><img src="./img/image3.jpg" alt="Image 3"></li>
</ul>
<div class="swiper-pagination pager"></div>
<div class="badge_wrap">
<?php if ($row['wr_11']) { ?>
<div class="badge black"><?php echo $row['wr_11']; ?></div>
<?php } ?>
<?php if ($row['wr_12']) { ?>
<div class="badge black"><?php echo $row['wr_12']; ?></div>
<?php } ?>
<?php if ($row['wr_13']) { ?>
<div class="badge"><?php echo $row['wr_13']; ?></div>
<?php } ?>
</div>
</div>
// 중략
<div class="btn_area">
<button class="inq_btn">문의하기</button>
<a href="#"><i class="fa fa-phone"></i> 0000-0000</a>
</div>
</div>
</div>
</div>script.js
Copy
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
$(document).ready(function(){
$(".item_list_btn").click(function() {
$(this).toggleClass("active");
$(".item_list_wrap").toggleClass("mo").toggle();
$("#landCont").toggleClass("mo")
});
$(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");
}
})
})
let landViewSwiper = '';
function land_view(wr_id){
$.ajax({
url: g5_url+"/skin/board/test/view.ajax.php",
type: 'POST',
data: {
"wr_id": wr_id
},
async:false,
success: function(data){
$("#landView").remove();
$('body').append(data);
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");
}
// 이하생략이렇게 작성했습니다.
즐거운 주말 되세요~
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
2023-08-12 (토) 16:27:32
$(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개
2023-08-12 (토) 16:42:47
2023-08-12 (토) 16:20:56
화면에 맞게 리사이징의 기준이 뭔가요?
뭔가 어떻게 하고 싶다 라는 내용이 부족한것 같습니다.
차라리 js 말고 css 처리하세요..
답변에 대한 댓글 1개
2023-08-12 (토) 16:22:51
아~ 해상도에 맞게 팝업창이 리사이징이 되어서 중앙에 위치하게 하고 싶다는 것이였습니다... 설명이 부족했습니다..ㅠㅠ
답변을 작성하려면 로그인이 필요합니다.
즐거운 주말 되세요