프로그래밍/Web 개발
[JS] Modal 사용하기
JuoDev
2022. 3. 2. 14:20
UI 화면 개발시 자주 사용된다고 하는 Modal 창 사용했던 방법을 적어놈
화면위에 또 다른 화면을 띄우는 것으로 popup 창과는 다르게
창이 띄워져 있는 동안 부모 창을 컨트롤 할 수가 없다. Dialog 창이라고 보면될듯
직접 개발된 소스를 통해 예시를 확인
나중에 사용할때 참조하기위해,,
jsp
<!-- Modal -->
<div class="modal fade" id="searchModelModal" tabindex="-1" role="dialog" aria-labelledby="searchModelModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="searchModelModalLabel">New message</h4>
</div>
<div class="modal-body">
<table id="datatable1" class="table table-condensed" style="width:100%;"></table>
</div>
</div>
</div>
</div>
js
function searchModelModal(){
var columns = [
{ title:"모델명", "data": "model_nm"},
{ title:"제조사명", "data": "makr" },
{ title:"장비유형", "data": "dev_type_nm"}
];
var table = $('#datatable1').DataTable({
"sPaginationType": "full_numbers",
"processing": true,
"serverSide": true,
"ajax": {
"url": jhContextPath + "/manage/getModelList.do",
"type": "GET"
},
"columns": columns,
"dom": "<'btn-group'f<'btn-group'B>>tp",
"select": "single",
"initComplete": function(settings, json) {
$("#datatable1_filter > label > input").attr('placeholder', '모델명, 제조사로 검색');
},
"responsive": true
});
$('#datatable1 tbody').on('click', 'tr', function () {
var data = table.row( $(this) ).data();
if(data.dev_type_cd != $("#dev_type_cd").val()){
alert("선택한 모델은 장비유형이 맞지 않습니다. ");
return false;
}
$("#model_seq").val(data.model_seq);
$("#sel_dev_type_cd").val(data.dev_type_cd);
$("#model_nm").val(data.model_nm);
$("#dev_type_nm").val(data.dev_type_nm);
$("#makr").val(data.makr);
modal.modal('hide');
});
$('#searchModelModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
button.data('target');
modal = $(this);
modal.find('.modal-title').text('모델 검색');
});
}
구현화면
검색창 누르면 나오는 modal 창