jquery - 본문글 집중모드 페이지 새로고침

'집중모드 켜기' 버튼을 눌러보세요.

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;border-radius:10px;box-shadow:0 0 10px #111;}
.btn_post_mode{display:inline-block;margin:20px 0 0 20px;padding:10px;border:0;text-align:center;background:#222;color:#fff;line-height:1.6;}

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');
	});
});
해당 팁이 유용했다면,
눌러주세요.