본문글 집중모드 효과

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

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

'집중모드 켜기'를 누르면 본문 영역을 제외한 부분이 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;box-shadow:0 0 10px #111;}

viewDocument 집중모드가 되야하는 영역 class명으로 꼭 바꿔주셔야합니다.

/* 버튼 */

. btn_post_mode{}

버튼 스타일은 본인에 맞게 꾸며주세요.

script

jQuery(function($){

// post mode

    $('.btn_post_mode').on('click',function(){ 

        $('body').toggleClass('post_mode');

        if( $(this).find('span').html() == '집중모드 켜기' ) {

            $(this).find('span').html('집중모드 끄기');

        } else if($(this).find('span').html() == '집중모드 끄기' ) {

          $(this).find('span').html('집중모드 켜기');

        } else {

          $(this).find('span').html('집중모드 끄기');

        }

    });

});

jQuery(function($){
// post mode
   $('.btn_post_mode').on('click',function(){ 
      var $s = $(this).find('span');
      $s.html($s.text() == '집중모드 켜기' ? '집중모드 끄기' : '집중모드 켜기')
      $('body').toggleClass('post_mode');
   });
});

* https://xetown.com/rxe_tip/1088389#comment_1089230 스크립트로 변경합니다.

xe에 국한된건 아니며, 블로그에서도 사용가능합니다.

미리보기 : https://www.webmini.net/jquery/634109

미리보기 예제 : https://www.webmini.net/post_mode
'집중모드 켜기'를 눌러보시면 됩니다.