팝업창 모바일 화면에 맞게 사이즈 조절하기
환경설정 > 팝업레이어관리에서 입력한 내용은 PC 버전 위주로 되어 있습니다.
PC버전 사이즈에 맞춰서 올리면 모바일에서는 화면사이즈가 맞지 않아서 오버사이즈가 되버리죠.
모바일에서는 팝업창을 가로 100%로 별도로 설정하는 방법입니다.
그누보드 기본 설정인 PC 페이지와 모바일 페이지를 구분해서 사용하고 있는 경우에만 해당됩니다.
1. 수정파일 : mobile/newwin.inc.php
팝업 내용 출력 부분에서 빨간색 부분을 모두 삭제합니다.
<div id="hd_pops_<?php echo $nw['nw_id'] ?>" class="hd_pops" style="top:<?php echo $nw['nw_top']?>px;left:<?php echo $nw['nw_left']?>px;">
<div class="hd_pops_con" style="width:<?php echo $nw['nw_width'] ?>px;height:<?php echo $nw['nw_height'] ?>px">
<?php echo conv_content($nw['nw_content'], 1); ?>
</div>
<div class="hd_pops_footer">
<button class="hd_pops_reject hd_pops_<?php echo $nw['nw_id']; ?> <?php echo $nw['nw_disable_hours']; ?>"><strong><?php echo $nw['nw_disable_hours']; ?></strong>시간 동안 다시 열람하지 않습니다.</button>
<button class="hd_pops_close hd_pops_<?php echo $nw['nw_id']; ?>">닫기</button>
</div>
</div>
2. 수정파일 : css/mobile.css
(테마 사용 중이면 테마 폴더에 있는 파일 /theme/테마명/css/mobile.css)
// 팝업레이어 부분에서..
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
여기는 이렇게 수정.
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;top:0px;left:0px}
(좌측, 상단 위치 지정이 필요하면 모바일 페이지는 저기서 설정하면 됩니다.)
.hd_pops_con {}
여기는 이렇게 수정.
.hd_pops_con {width:100%;min-height:200px}
팝업 내용을 텍스트 위주가 아닌 단일 이미지로 사용한다면 한 줄 더 추가.
.hd_pops_con img {width:100%}
전체를 정리해보면 이런 형태입니다. (빨간색 부분이 수정 및 추가된 곳입니다.)
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:1px}
#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;top:0px;left:0px}
.hd_pops_con {width:100%;min-height:200px}
.hd_pops_con img {width:100%}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
