[Bootstrap] modal 리사이징, 이동, 전체화면

JQuery

부트스트랩 모달의 리사이징 기능 추가, 모달의 헤더 더블클릭 시 전체화면 기능 구현

// 모달 부트스트랩 초기설정 + 오픈
function modalInitSetOpen($modal,nextOpen = true){
	
	// 모달 속성 세팅 ---------------------------------------------------------------
	if(!window['cpn_modal_dblclick']){
		window['cpn_modal_dblclick'] = {};
	}else{
		window['cpn_modal_dblclick'][$modal[0].id] = undefined;
	}
	
    
	// 기본 설정 --------------------------------------------------------
	//$(".modal-body",$modal).contents().wrapAll(`<div style="width:${$(".modal-content",$modal).outerWidth(true) - $(".modal-body",$modal).outerWidth(true) - 10}px;"></div>`);
	$(".modal-body",$modal).scrollTop(0);
	
    
	// 리사이징, 드래그 -------------------------------------------------
	$(".modal-content",$modal)
		.draggable({
			handle:'.modal-header'
		})
		.resizable({
			minHeight:500,
			handles: 's, e, se'
		});
        
        
	// 비헤이비어 -------------------------------------------------------
	// 리사이징
	$(".modal-content",$modal).on("resize",function(){
		clearTimeout(parent.timeId);   
		parent.timeId = setTimeout(parent.resizeRowContent("modal"), 200);
	});
    
	// 헤더 더블클릭 - 전체화면
	$(".modal-header",$modal).on("dblclick",function(){
		var $modalContent= $(".modal-content",$modal);
		var modalFullJson = window['cpn_modal_dblclick'][$modal[0].id];
		var isFull = true // true : 전체화면, false : 전체취소
		if(modalFullJson){
			isFull = !modalFullJson.isFull;
		}
		var data = {"isFull":isFull};
		
		if(isFull){
			data.beforeWidth = $modalContent.outerWidth();
			data.beforeHeight = $modalContent.outerHeight();
			$modalContent.addClass("us-modal-full").draggable("destroy");
		}else{
			$modalContent
			.removeClass("us-modal-full")
			.css({
				"width" : modalFullJson.beforeWidth,
				"height": modalFullJson.beforeHeight
			}).draggable({
				handle:'.modal-header'
			});
		}
		
		window['cpn_modal_dblclick'][$modal[0].id] = data;
		parent.timeId = setTimeout(parent.resizeRowContent("modal"), 200);
	});
    
	// 모달 오픈
	if(nextOpen){		
		$modal.modal({show: true});
	}
	
	
	// 그외 기본 세팅
	// input
	setInputAttr();
}



// 호출
modalInitSetOpen($("#modal"));