예쁘게 구현한 자동 팝업레이어창 정보
예쁘게 구현한 자동 팝업레이어창관련링크
첨부파일
본문
[ 기능 ]
- 그누보드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