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

본문 바로가기
사이트 내 전체검색

아이디비번찾기

그누보드팁

그누보드 영카트 초보 사용자를 위한 기본 매뉴얼, 스킨 제작 기초강좌를 공유합니다.

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

페이지 정보

작성자 관리자 작성일17-10-15 18:51 조회406회

본문

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

로그인 후 댓글을 남겨주세요.
그누보드팁 목록
번호 제목
공지 그누보드 팁 자료실 공지사항
74 소셜 로그인 그누보드 5.3버전에 있는 것을 5.2버전에 추가하기
73 사이트에 숨김 처리된 스팸 광고 글이 있는지 확인하는 방법
72 광고 스팸성 글을 안 보이게 숨겨서 올리는 것 필터링
71 게시판 글 제목이나 내용에서 단어 필터링 관리자는 예외 시키기
70 인덱스(index) 페이지에 특정 게시판을 직접 출력하기 댓글4
69 모바일과 PC 테마 각각 다른 테마를 사용해서 적용하기
68 게시판에 글 등록시 발송되는 메일 제목 또는 내용 수정하기
67 비밀글로 작성된 글을 읽을 때 무조건 패스워드 입력받기
66 특정 게시판 내용 없이 글 등록하기
65 크롬에서 비밀번호 입력란이 공백으로 보일 때
64 회원 삭제시 완전히 삭제하기
63 신규 회원 가입 임시 차단
62 스팸 회원 가입 차단하는 방법 댓글1
61 분류에 있는 공지 글자 바꾸기
60 그누보드에 Font Awesome 적용하기
59 그누보드 처음 설치할 때 확인해야 할 사항 댓글2
58 DHTML 에디터 PC 모바일 구분해서 사용하는 방법 댓글1
57 스마트 에디터 툴바 아이콘 삭제하는 방법 댓글1
56 게시판 하단 페이징 숫자 간격 맞추기
55 본문 이미지 alt 값에 글 제목 넣기 댓글1
54 스마트 에디터에서 사진 업로드 기능 없애기
53 회원 가입 메일 인증을 회원 목록에서 일괄 처리 댓글1
52 스마트 에디터 사진 업로드 용량 제한하기
51 게시판 관리에서 상단 이미지 업로드 추가하기
게시물 검색


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

Copyright © GNUSTUDY. All rights reserved.
상단으로