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