[jQuery] bootstrap(부트스트랩) 레이어 팝업/모달창(modal) 띄우기

흔히 레이어 팝업/모달 창은 기존의 페이지 위에 레이어를 새로 올리는 것을 말합니다.
기존의 팝업은 새로운 윈도 창이 열리는 것에 반하여 레이어(모달)는 사용자에게 보여주고 싶은 메시지나
다음 진행사항으로 넘어가기 위해 필요한 사항을 노출할 수 있습니다.

아래 예제는 bootstrap(부트스트랩)으로 간단히 모달 창을 구현해 봤습니다.

페이지에 진입 하자마자 모달 창이 뜨는 소스입니다. 아래를 응용하셔서 버튼을 클릭해서 모달을 띄우고 싶다면

이벤트 후 modal('show')를 통해 호출 하실 수 있습니다. 

 

모달 띄우기

modal('show')

 

모달 숨기기

modal('hide')

 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function() {
	$("#modal").modal("show");
});
</script>
<div class="modal" id="modal"  role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true" >
	<div class="modal-dialog" style="width:850px;">
		<div class="modal-content" >
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					×
				</button>
				<h4 class="modal-title" id="myModalLabel">타이틀</h4>
			</div>
			<div class="modal-body">
				<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-4" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false" data-widget-togglebutton="false">
					<div role="content">
						<div class="widget-body">		
							내용 입력		
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
				<button type="button" class="btn btn-primary" id="btn_save">저장</button>
			</div>
		</div>
	</div>
</div>