팝업창 모바일 화면에 맞게 사이즈 조절하기 - 그누보드팁

본문 바로가기
전체검색

그누보드팁

그누보드, 영카트 초보 제작자분들을 위한 다양한 스킨 제작 활용 팁을 공유합니다.

팝업창 모바일 화면에 맞게 사이즈 조절하기

관리자 17-10-15 18:51

환경설정 > 팝업레이어관리에서 입력한 내용은 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}

로그인 후 댓글 작성 가능합니다.
그누스킨닷컴

그누스터디는 그누보드, 영카트를 이용하시는 초보 사용자를 위한 정보를 공유합니다.

E-MAIL : gnustudy@naver.com / 카카오톡 : gnustudy / 텔레그램 : gnustudy
제작 문의를 제외한 일반 문의는 QA 게시판을 이용해주세요.

Copyright © GNUSTUDY. All rights reserved.