0
조회 수 : 420 신고 : 0
미리보기 : | https://www.webmini.net/post_mode |
---|
웹미니 사이트 게시판 뷰에서 사용한 방법입니다.
집중모드를 사용하면 주변 딤처리를 하여 좀더 게시글을 읽을때 집중을 해주는 효과입니다.
집중모드 켜기를 누르면 본문 영역을 제외한 부분이 dim 처리가 됩니다.
html
원하는 위치에 버튼 소스를 삽입하세요.
<button class="btn_post_mode"><span>집중모드 켜기</span></button>
하단부분에 dim 처리 소스를 삽입합니다. (아무곳이나)
<div class="bg_post_mode"></div>
css
/* dim 처리 */
.bg_post_mode{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:998;background:#000;opacity:.8;}
body.post_mode .bg_post_mode{display:block;}
body.post_mode .viewDocument{position:relative;z-index:999;background:#fff;box-shadow:0 0 10px #111;}
viewDocument 집중모드가 되야하는 영역 class명으로 꼭 바꿔주셔야합니다.
/* 버튼 */
. btn_post_mode{}
버튼 스타일은 본인에 맞게 꾸며주세요.
script
$(document).ready(function(){
// post mode
$('.btn_post_mode').on('click',function(){
var $s = $(this).find('span');
$s.html($s.text() == '집중모드 켜기' ? '집중모드 끄기' : '집중모드 켜기')
$('body').toggleClass('post_mode');
});
});
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 아이콘이 붙게됩니다.
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상