[JS] Modal 사용하기

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">&times;</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 창