상세정보 팝업 띄우기

결과물:

1, back:

import com.google.gson.Gson;

if ("viewOrder".equals(sw)) {       	
        	String orderRef=request.getParameter("orderRef");
        	OrderVo m = svc.viewOrder(Integer.parseInt(orderRef));
        	
        	System.out.println("ctrl viewOrder orderRef: "+orderRef);

        	//페이지 전환 없이 팝업 띄우기
        	response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");
            PrintWriter out = response.getWriter();
            Gson gson = new Gson();
            String jsonResponse = gson.toJson(m);
            out.write(jsonResponse);
            out.flush();        	
        } 

2, front:
아래 OrderRef를 누르면 팝업이 뜨도록 할 예정

<a href="javascript:void(0);" onclick="showOrderDetail('<%= od.getOrderRef() %>')">
<%= od.getOrderRef() %>
</a>

팝업 영역: (css 별도 작성하면 좋겠지)

<!-- 팝업용 div -->
<div id="orderDetailPopup" style="display:none; position:fixed; top:50%; left:50%; 
transform: translate(-50%, -50%); width:1000px; height:auto; background:white; 
border:1px solid c5c5c5; overflow:auto; z-index: 1000; text-align: center; padding: 20px;
border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);">

    <button class="subbtnsmall" onclick="closePopup()" style="position: absolute; top: 15px; right: 15px;">닫기</button>
    
    <div id="orderDetailContent" style="margin: 0 auto; display: inline-block;"></div>
</div>
    
<!-- 팝업 뜨면 반투명 배경 -->
<div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; 
background:rgba(0,0,0,0.4); z-index: 500;" onclick="closePopup()"></div>

script:

<!-- viewOrderPopup -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
    function showOrderDetail(orderRef) {
        $.ajax({
            url: 'CardCtrl?sw=viewOrder',
            type: 'GET',
            data: { orderRef: orderRef },
            dataType: 'json',
            success: function(response) {
                var content = '<h2>주문 상세 정보</h2>';
                
                content += '<br><table>';
                ...
                content += '<tr><th>카드 수령지:</th><td>' + response.custAdd + ', ' + response.detailAddress + '</td></tr>';
                content += '</table><br>';

                $('#orderDetailContent').html(content);
                $('#orderDetailPopup').show();
                $('#overlay').show();
            }
        });
    }

    function closePopup() {
        $('#orderDetailPopup').hide();
        $('#overlay').hide();
    }
</script>