모달 띄우는 코드

모달 띄우기

html 코드로 모달 띄우기

<!--모달 띄우기 버튼-->
<a href="javascript:void(0)" class="btn btn-download" data-toggle="modal" data-target="#downloadModal">GML Download</a>

<!--모달 창 디자인-->
<div class="modal inmodal fade" id="downloadModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-download">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
					<span class="sr-only">Close</span>
				</button>
                <h5 class="modal-title">
                    Download
                </h5>
            </div>
            <div class="modal-body">
                <form class="d-inline" action="<c:url value="/"/>downloadGML.do" method="POST">
                    <input type="hidden" name="taodSeq" value="" />
                    <input type="hidden" name="gmlType" value="" />
                    <button type="button" class="btn fov-down">Geo Cultural Contents</button>
                    <button type="button" class="btn boun-down">Geo Referenced Contents</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

 

자바스크립트로 모달 띄우기

<!--모달 띄우기 버튼-->
<a href="javascript:void(0)" class="btn btn-download">GML Download</a>

/**
 * 모달 띄우기 스크립트
 */
$('.download-gml').click(function() {
    event.preventDefault(); //태그의 기본 동작 차단

    //{backdrop: 'static'}는 여백 클릭시 닫히지 않도록 하는 옵션
    $('#downloadModal').modal({backdrop: 'static'}).on('shown.bs.modal', function (e){
        console.info('download modal');
    });
});

<!--모달 창 디자인-->
<div class="modal inmodal fade" id="downloadModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-download">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
					<span class="sr-only">Close</span>
				</button>
                <h5 class="modal-title">
                    Download
                </h5>
            </div>
            <div class="modal-body">
                <form class="d-inline" action="<c:url value="/"/>downloadGML.do" method="POST">
                    <input type="hidden" name="taodSeq" value="" />
                    <input type="hidden" name="gmlType" value="" />
                    <button type="button" class="btn fov-down">Geo Cultural Contents</button>
                    <button type="button" class="btn boun-down">Geo Referenced Contents</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>