sam-kd/output/inputModal.php

<!-- Bootstrap 5.3 필요 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
/* 기본 폰트 크기 12px로 전체 적용 */
#saleModal * {
  font-size: 12px !important;
}

/* input 및 select 등의 요소 높이와 padding 축소 */
#saleModal .form-control {
  padding: 2px 4px !important;
  height: auto !important;
  font-size: 12px !important;
}

/* 테이블 셀 패딩 최소화 */
#saleModal table td,
#saleModal table th {
  padding: 4px !important;
  vertical-align: middle;
  font-size: 12px !important;
}

/* 버튼 크기도 작게 */
#saleModal .btn {
  padding: 2px 8px;
  font-size: 12px;
}

/* 모달 내용 전체 크기 조절 (불필요한 공간 제거) */
#saleModal .modal-body {
  padding: 8px;
}

#saleModal .modal-header,
#saleModal .modal-footer {
  padding: 6px 10px;
}

/* 입력박스 사이 간격도 줄이기 */
#saleModal .row > [class^="col"] {
  margin-bottom: 4px;
}
</style>


<!-- 모달 버튼 -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#saleModal">판매 수정 열기</button>

<!-- 모달창 -->
<div class="modal fade" id="saleModal" tabindex="-1" aria-labelledby="saleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="saleModalLabel">판매 수정</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="saleForm">
          <div class="row g-3 mb-3">
            <div class="col-md-3">
              <label class="form-label">일자</label>
              <input type="date" class="form-control">
            </div>
            <div class="col-md-3">
              <label class="form-label">거래처</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-md-3">
              <label class="form-label">담당자</label>
              <input type="text" class="form-control">
            </div>
            <div class="col-md-3">
              <label class="form-label">창고</label>
              <input type="text" class="form-control">
            </div>
          </div>

          <table class="table table-bordered text-center align-middle">
            <thead class="table-secondary">
              <tr>
                <th>품목코드</th>
                <th>품목명</th>
                <th>규격</th>
                <th>수량</th>
                <th>단가</th>
                <th>공급가액</th>
                <th>부가세</th>
                <th>적요</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="text" class="form-control" value="N74202"></td>
                <td><input type="text" class="form-control" value="N컨트롤 기판"></td>
                <td><input type="text" class="form-control" value="380V"></td>
                <td><input type="number" class="form-control text-end" value="3"></td>
                <td><input type="number" class="form-control text-end" value="50000"></td>
                <td><input type="number" class="form-control text-end" value="150000"></td>
                <td><input type="number" class="form-control text-end" value="15000"></td>
                <td><input type="text" class="form-control" value="현대백화점점훈점/경동-최장"></td>
              </tr>
              <tr>
                <td><input type="text" class="form-control" value="30006"></td>
                <td><input type="text" class="form-control" value="운송료"></td>
                <td><input type="text" class="form-control" value=""></td>
                <td><input type="number" class="form-control text-end" value="1"></td>
                <td><input type="number" class="form-control text-end" value="6000"></td>
                <td><input type="number" class="form-control text-end" value="6000"></td>
                <td><input type="number" class="form-control text-end" value="600"></td>
                <td><input type="text" class="form-control" value=""></td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
      <div class="modal-footer">
        <span class="me-auto fw-bold">합계: 공급가액 156,000 | 부가세 15,600 | 합계 171,600</span>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
        <button type="button" class="btn btn-primary">저장</button>
      </div>
    </div>
  </div>
</div>

<script>
// 모달 드래그 기능 추가
document.addEventListener('DOMContentLoaded', () => {
  const modal = document.querySelector('#saleModal .modal-dialog');
  const header = document.querySelector('#saleModal .modal-header');

  let isDragging = false;
  let offsetX = 0;
  let offsetY = 0;

  header.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - modal.offsetLeft;
    offsetY = e.clientY - modal.offsetTop;
    modal.style.position = 'absolute';
    modal.style.margin = 0;
    modal.style.zIndex = 1055;
  });

  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      modal.style.left = `${e.clientX - offsetX}px`;
      modal.style.top = `${e.clientY - offsetY}px`;
    }
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
});
</script>