[국비 94일차 TIL] 차트를 사이드바에서 모달로 띄우기

 

sidebar.jsp

<div class="sidebar">
  <ul>
    <li><a href="#" id="carbonMap" >탄소지도</a></li>
    <li><a href="#" id="dataOption" >데이터</a></li>
    <li><a href="#" id="statistic" >통계</a></li>
  </ul>
</div>

<!-- 모달 -->
<div class="modal fade" id="chartModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">통계 차트</h5>
                <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <c:import url="chart.jsp" /> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-bs-dismiss="modal">닫기</button>
            </div>
        </div>
    </div>
</div>

//통계 항목 클릭 이벤트 핸들러
 $("#statistic").on("click", function(event) {
    event.preventDefault(); // 기본 동작 방지

    // 통계 모달 열기
    $("#chartModal").modal("show");
 });

chart.jsp

	<div>
		<div style="display: inline-block;">
			<select id="loc" name="loc">
				<option>시/도 선택</option>
				<option id="all" value="${total_used_kwh}">전체 선택</option>
				<c:forEach items="${chartList}" var="row2">
					<option id="sdOption" value="${row2.sd_cd}">${row2.sd_nm}</option>
				</c:forEach>
			</select>
		</div>

		<!-- 통계 보기 버튼 -->
		<button type="button" class="btn btn-success" id="showStatus">통계 보기</button>
	</div>
	    <div style="text-align: right;">
        <button type="button" class="btn btn-success" id="reset">리셋</button>
    </div>
	<!-- 모달 -->
	<div id="chartModal">
		<div>
			<div class="modal-body">
				<div id="chart_div"></div>
				<!-- 통계 차트를 표시할 공간 -->
			</div>
		</div>
	</div>
	<br>

 

 

$('#showStatus')
    .click(function() {
        console.log('버튼 클릭됨');
        jQuery('#chartModal').modal('show'); // 모달 열기

 

 

$(document).ready(function() {
    $('#reset').click(function() {
        $('#chart_div').hide();
    });

    $('#showStatus').click(function() {
        $('#chart_div').show();
    });
});