스프링 부트스트랩 Modal 모달 사용

 

제일 심플한 버전

<!-- Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">
제목넣기
</h5>
<button class="close" type="button" data-dismiss="modal" aria-hidden="true">
&times;</button>
</div>
<div class="modal-body">

내용넣기

</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="button" >Save changes</button>
</div>
</div>
</div>
</div>

<script type="text/javascript">
// 메뉴보기 버튼 클릭 이벤트 핸들러
document.getElementById("getMenu").addEventListener("click", function() {
// 모달 표시
$('#myModal').modal('show');
});

</script>
<!-- Modal 끝 -->

 

 

 

 

 

 

 

 

 

 

---

 

게시판버전

 

 

html

 

<!-- Modal-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">Modal title</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                </div>
                <div class="modal-body">처리 완료</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button" >Save changes</button>
                </div>
            </div>
        </div>
    </div>  

 

 

 

js (jqeury)

 

<script type="text/javascript">

$(document).ready(function(){

var result = '${result}';

checkModal(result);

function checkModal(result){

if(result === ''){
return;
}

if(parseInt(result) > 0 ) {
$(".modal-body").html("게시글 " + parseInt(result) + " 번이 등록되었습니다!");
}
$("#myModal").modal("show");
}
});

</script>