예쁘게 구현한 자동 팝업레이어창 > 그누보드5 팁자료실

그누보드5 팁자료실

예쁘게 구현한 자동 팝업레이어창 정보

예쁘게 구현한 자동 팝업레이어창

첨부파일

newwin.inc.php (4.3K) 99회 다운로드 2018-04-07 15:14:16
cancel2.png (1.4K) 10회 다운로드 2018-04-07 15:14:16
ws_popup.html (9.0K) 55회 다운로드 2018-04-07 15:14:16

본문

2948944245_1523081583.9439.jpg

 

[ 기능 ]

- 그누보드5 팝업레이어에 5가지 색상의 팝업레이어창이 자동으로 연결된다.
- 활성화되는 첫번째~다섯번째 팝업레이어까지 차례로 green,blue,pink,purple,maroon 등의 색상이 적용된다.
- 데스크탑용 및 모바일용 공용으로 모두에 적용됩니다. (g5/bbs/ 및 g5/mobile 폴더)
 

 

[ 적용방법 ]

1. FTP로 연결해 newwin.inc.php 파일을 g5/bbs/ 및 g5/mobile 폴더에 전송합니다. (폴더 속 기존 파일은 백업해 놓으시기 바랍니다.)
   - newwin.inc.php 파일은 데스크탑용 및 모바일용 공용으로 모두에 적용됩니다.
2. FTP로 연결해 cancel2.png 파일을 g5/img 폴더로 전송합니다.(newwin.inc.php 62번째 라인 - 경로수정 가능)
3. 관리자모드 > 팝업레이어관리 > 새창관리추가 를 클릭해서 [팝업레이어] 하나를 생성한다.
4. 레이어 편집화면 속 [내용] 에디터창 아랫쪽의 <> 를 클릭해 HTML 편집 모드로 전환한다.
5. ws_popup.html(예제파일) 속 본문내용을 적당히 수정한 뒤 [내용] 에디터창에 복사해 넣는다.
  - 본문내용 : <!-- 이 아래부터 팝업레이어 본문 --> 아래 라인부터 <!-- 이 위까지 팝업레이어 본문 --> 윗라인까지
6. 레이어 옵션을 적당히 지정하고 [확인] 버튼을 클릭한다.

 


[ 상세 설명 ]

※ 예제파일 : ws_popup.html (이 파일 속 내용을 그누보드5 팝업레이어창에 적용시켰습니다)

 

http://wooshin4.or.kr/css/ws_popup.html

 

-. 그누보드5 팝업레이어 편집화면 속 [내용] 에디터창에 복사할 부분은 아래와 같다.

  (이 부분을 원하는 대로 수정하면 된다.)

 

 <!-- 이 아래부터 팝업레이어 본문 -->
  <h2>공지글 Sample 첫번째입니다.</h2>
  <p>
   첫번째 총동창회 홈페이지가 <span class="c-blue">새롭게 개편</span>되었습니다.<br><br>
   이번 개편으로 <b>스마트폰에서도 쉽게 접근</b>할 수 있게 되었으니만큼, 동창 여러분들께서는 언제 어느때나 총동 홈페이지에 접속하시어 <b>귀한 의견을 주시고 또 정보도 공유</b>하시기 바랍니다.<br><br>
   홈페이지 활성화를 위해 총동창회에서도 <b>여러 컨텐츠들을 홈페이지에 게시할 수 있도록 최선</b>을 다하겠습니다.<br><br>
  </p>
  <ul>
   <li><a href="#">총동회장님의 인사말(클릭)</a></li>
   <li><a href="#">스마트폰에 **총동홈피 바로가기 추가방법(클릭)</a></li>
  </ul>
 <!-- 이 위까지 팝업레이어 본문 -->

 

- 글자색상 class는 c-green, c-blue, c-red 등 사용가능
   예) <span class="c-blue">새롭게 개편</span>

 

- newwin.inc.php 파일 : 중요하다 여기는 부분에는 주석을 넣었으니 이해하기 어렵지 않을 겁니다.
  . Line.11 : max-width:500px; - 데스크탑 팝업창의 최대너비 지정, 원치 않는다면 삭제합니다.
  . 사용한 php소스 그리 복잡하거나 어렵지 않으니 초보자분들도 충분히 이해 가능할 겁니다.

 

 

추천
10

댓글 8개

전체 2,424 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT