jQuery 관련 팁을 공유하는 곳입니다. [가입을 하셔야 다운로드가 가능합니다.]
  • 웹미니 한줄 전광판 영역 입니다.
글 수 24
미리보기 : https://www.webmini.net/post_mode 

웹미니 사이트 게시판 뷰에서 사용한 방법입니다.

집중모드를 사용하면 주변 딤처리를 하여 좀더 게시글을 읽을때 집중을 해주는 효과입니다.

 

스크린샷 2018-10-09 오후 5.48.46.png

집중모드 켜기를 누르면 본문 영역을 제외한 부분이 dim 처리가 됩니다.

 

스크린샷 2018-10-09 오후 5.49.03.png

 

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');

  });

});

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/jquery/634109/5e6/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

title: 화분6시내고환 (634181)

2018.10.10 10:41:16

필요했던건데 감사합니다.

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
24 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) title: [ani]깜빡이는 표정빽짱구 2019-03-29   542
23 버튼과 같은 이름의 레이어 띄우기 title: [ani]깜빡이는 표정빽짱구 2019-03-26   246
22 ajax로 호출시 jquery 실행이 안될때 title: [ani]깜빡이는 표정빽짱구 2019-01-04   263
21 jquery 탭메뉴 title: [ani]깜빡이는 표정빽짱구 2019-01-02   298
20 가로사이즈 구하기 title: [ani]깜빡이는 표정빽짱구 2018-11-06   190
19 jquery - 이미지 체크박스, 라디오 버튼 title: [ani]깜빡이는 표정빽짱구 2018-10-16   300
18 본문글 집중모드 효과 file [1] title: [ani]깜빡이는 표정빽짱구 2018-10-09   394
17 스크롤 고정형 퀵배너 title: [ani]깜빡이는 표정빽짱구 2018-09-07   381
16 버튼 클릭시 원하는 곳으로 부드럽게 이동 title: [ani]깜빡이는 표정빽짱구 2018-09-07   578
15 jquery 토글 기능 title: [ani]깜빡이는 표정빽짱구 2018-09-06   251
14 해당 영역 높이값 자동으로 가져오기 title: [ani]깜빡이는 표정빽짱구 2016-04-27   446
13 해상도별로 CSS호출하기 title: [ani]깜빡이는 표정빽짱구 2015-10-14   880
12 iscroll 사용시 동적일때 문제 title: [ani]깜빡이는 표정빽짱구 2014-02-20   3710
11 [스크랩] jQuery 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2613
10 제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모 title: [ani]깜빡이는 표정빽짱구 2013-01-29 1 6992
9 버튼이나 텍스트 링크 클릭시 원하는곳으로 부드럽게 이동하기 file [1] title: [ani]깜빡이는 표정빽짱구 2012-10-22 2 5349
8 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. title: [ani]방울UI 2012-10-11   3518
7 jQuery 로 레이어 드래그 하기 title: [ani]깜빡이는 표정빽짱구 2012-09-07   3439
6 jQuery로 파일첨부버튼 이미지로 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-07   4601
5 jQuery 제이쿼리로 셀렉트 박스 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-06 1 5626