특정  div 영역  fullscreen 지정

특정 div 영역 fullscreen 지정

소스예제
.content_box{position: relative; padding:5px;} .content_box textarea{width:100%; height:200px;} .content_box .btn_ex_fullscreen_cancel{display: none; width:100%; margin:5px; background:#ff0080; color:#fff;} .btn_ex_fullscreen{display: inline-block; width:100%; margin:5px; } .content_box.fullscreen {position: fixed; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background:#090300; !important; z-index: 9999 !important;} .content_box.fullscreen textarea{height:90%;} .content_box.fullscreen .btn_ex_fullscreen_cancel{display: inline-block;} /* 전체 화면 적용시 기본 레이아웃 css 컨트롤 아래는 자신에 맞게 알맞게 설정 */ body.fullscreen{} body.fullscreen #hd, body.fullscreen #hd_wrapper {display: none;} FullScreen 취소 FullScreen

Tag And Script

<style>
.content_box{position: relative; padding:5px;}
.content_box textarea{width:100%; height:200px;}
.content_box .btn_ex_fullscreen_cancel{display: none; width:100%; margin:5px; background:#ff0080; color:#fff;}
.btn_ex_fullscreen{display: inline-block; width:100%; margin:5px; }

.content_box.fullscreen {position: fixed; top: 0; left: 0; width: 100vw !important; height: 100vh !important; background:#090300; !important; z-index: 9999 !important;}
.content_box.fullscreen textarea{height:90%;}
.content_box.fullscreen .btn_ex_fullscreen_cancel{display: inline-block;}

/* 전체 화면 적용시 기본 레이아웃 css 컨트롤 아래는 자신에 맞게 알맞게 설정 */
body.fullscreen{} 
body.fullscreen #hd, 
body.fullscreen #hd_wrapper {display: none;}
</style>

<div class="content_box">
	<textarea class="frm_input frm_textarea"></textarea>
	<button type="button" class="btn btn_ex_fullscreen_cancel">FullScreen 취소</button>
</div>
<button type="button" class="btn btn_ex_fullscreen">FullScreen</button>

<script>
$(function(e) {
	$(document).on('click', '.btn_ex_fullscreen', function(e){ 
		$('.content_box').addClass('fullscreen');
		$('body').addClass('fullscreen');
	});

	$(document).on('click', '.content_box.fullscreen .btn_ex_fullscreen_cancel', function(e){ 
		$('.content_box').removeClass('fullscreen');
		$('body').removeClass('fullscreen');
	});
});
</script>