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

· 2018-04-07 (토) 15:14:16 · 11322 · 8
cancel2.png

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소스 그리 복잡하거나 어렵지 않으니 초보자분들도 충분히 이해 가능할 겁니다.

 

 

첨부파일

newwin.inc.php (4.3 KB) 119회 2018-04-07 15:14
cancel2.png (1.4 KB)
19회 2018-04-07 15:14
ws_popup.html (9 KB) 86회 2018-04-07 15:14
|

댓글 8개

이뻐요@@
이쁘네요 ^^
감사합니다
감사합니다
감사합니다
정말 초꿀팁 감사합니다~~ 유용하게 잘 쓸것 같아요~!
2019-07-31 (수) 08:29:32
깔끔하고 이쁩니다 감사합니다^^
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
18-04-08 조회 7,332
18-04-07 조회 1.1만
18-04-07 조회 6,745
18-04-06 조회 8,879
18-04-06 조회 1만
18-04-05 조회 6,120
18-04-05 조회 6,526
18-04-05 조회 5,902
18-04-03 조회 6,613
18-03-31 조회 5,970
18-03-31 조회 6,381
18-03-31 조회 6,567
18-03-29 조회 5,329
18-03-29 조회 6,606
18-03-29 조회 7,099
18-03-27 조회 2만
18-03-27 조회 4,994
18-03-25 조회 6,087
18-03-24 조회 7,171
18-03-24 조회 6,451
18-03-24 조회 1.9만
18-03-24 조회 9,331
18-03-23 조회 6,342
18-03-23 조회 6,459
18-03-23 조회 7,514
18-03-23 조회 6,328
18-03-21 조회 7,227
18-03-21 조회 9,732
18-03-20 조회 9,081
18-03-19 조회 6,360