UJS
10
2021-04-28 12:29:03 작성 2021-04-28 12:53:35 수정됨
5
123

모달(modal)에서 닫기버튼을 만들었는데 반응이 없습니다.



function updateMultiItem(){
	var data = 	masterGrid.getCheckedRows();
	if(data == null || data == 0){
		alert("제품을 1건 이상 선택해주세요.");
		return;
	}
	
	$(".DETAIL_GROUP").css("display","none");
	$(".DETAIL_PROCUREMENT").css("display","none");
	$(".DETAIL_WAREHOUSE").css("display","none");
	$(".DETAIL_UNIT").css("display","none");
	$("#updateMultiItemModal").modal("show");
}

modal 생성코드입니다. 펑션을 하나 따로 만들어서 특정 버튼 클릭 시 modal을 보여주게 만들었습니다.


<div class="modal fade" id="updateMultiItemModal" aria-hidden="true">
    <div class="updateMulti-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">품목 다건 변경</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
         <form id="updatemultifrm" name="updatemultifrm" class="horizon" enctype="multipart/form-data">
         	<input type="hidden" id="UPDATER" name="UPDATER" value="${ fn:trim(loginVO.getId())}">
         	<input type="hidden" id="IITNO" name="IITNO">
         	<input type="hidden" id="SelectMulti" name="SelectMulti">
         	<input type="hidden" name="gridData" id="gridData">
              <div class="box-body">
              	<div class="row">
              		<div class="col-xl-5">
		                <div class="form-group">
			                    	<label for="EMPNO" class="col-sm-4 control-label left">변경할 그룹</label>
					                  <div class="col-sm-8">
					                     <select data-live-search="true" class="form-control selectpicker required" name="setMultiSelect" id = "setMultiSelect" onchange="setMultiDetail(this)">
					                    	<option value="" selected>-</option>
					                    	<option value="GROUP">품목그룹</option>
					                    	<option value="PROCUREMENT">조달구분</option>
					                    	<option value="WAREHOUSE">저장위치</option>
					                    	<option value="UNIT">단위</option>
					                    </select>
					                 </div>
		            	</div>
		            </div>
		             <div class="col-xl-5">
		             
		             <div class="form-group DETAIL_GROUP">
					      <label for="EMPNO" class="col-sm-4 control-label left">품목 그룹</label>
					       <div class="col-sm-8 right">
					          <select data-live-search="true" class="form-control selectpicker" name="IGROUP" id="IGROUP">
					          <option value="">전체</option>
					          <c:forEach items="${GROUP}" var="list">
					          <option value="${list.MINOR_CODE}">${list.CODE_NAME}</option>
					          </c:forEach>
					          </select>
					       </div>
			          </div>
			            
		              <div class="form-group DETAIL_PROCUREMENT">
		                  <label for="ISPCD" class="col-sm-4 control-label left">조달구분</label>
		                  <div class="col-sm-8 right">
		                    <select data-live-search="true" class="form-control selectpicker" name="ISPCD" id="ISPCD">
		                    	<option value="">선택</option>
		                    	<c:forEach items="${PROCUREMENT}" var="list">
		                    		<option value="${list.MINOR_CODE}">${list.CODE_NAME}</option>
		                    	</c:forEach>
		                    </select>
		                  </div>
		                </div>

		                <div class="form-group DETAIL_WAREHOUSE">
		                 <label for="ILOCN" class="col-sm-4 control-label left">저장위치</label>
		                  <div class="col-sm-8">
		                  
		                  	<select data-live-search="true" class="form-control selectpicker" name="ILOCN" id="ILOCN">
		                    	<option value="">선택</option>
		                    	<c:forEach items="${WAREHOUSE}" var="list">
		                    		<option value="${list.MINOR_CODE}">${list.CODE_NAME}</option>
		                    	</c:forEach>
		                    </select>
		                  </div>
		                </div>
		                
		                <div class="form-group DETAIL_UNIT">
		                  <label for="IUMSR" class="col-sm-4 control-label left">단위</label>
		                  <div class="col-sm-8">
		                  	 <select data-live-search="true" class="form-control selectpicker" name="IUMSR" id="IUMSR">
		                    	<option value="">선택</option>
		                    	<c:forEach items="${UNIT}" var="list">
		                    		<option value="${list.MINOR_CODE}">${list.CODE_NAME}</option>
		                    	</c:forEach>
		                    </select>
		                  </div>
		                </div>
		                
                		</div>
                	
                	</div>

               	</div>
            </form>
        </div>
        <div class="modal-footer">
                <button class="btn btn-secondary " type="button" data-dismiss="modal">취소</button>
                <button onclick="javascript:updateMultiInfo()" type="button"  class="btn btn-success pull-right updateBtn ">수정</button>
        </div>
      </div>
    </div>
  </div>

구성된 modal코드입니다.


OKKY에서도 찾아보고 서치도 여러번 해봣지만.. 제가 어디서 놓치고 있는건지를 모르겠습니다.


data-dismiss="modal"

modal 속성으로 dismiss을 사용했는데 header,footer 부분에 넣은 닫기버튼들이 눌러도


아무런 에러나 오류가 없으며 동작 자체를 하지가 않습니다..


그 외의 기능들은 전부 반응하는데 혹여나 id문제일까 싶어서 중복처리되는게 있는지 확인해봤지만 여전히 오리무중인 상태입니다..


제가 modal에 대해서 깊게 공부를 안해서 그런듯한데.. data-dismiss가 동작안하는 이유나, 혹은 동작 원리에 대해서 알려주시면 감사합니다.

0
  • 답변 5

  • 니르바나
    2k
    2021-04-28 13:04:25

    jquery는 써본지 오래되서 조언드리긴 힘들고 기본적으로 디버깅 시 쉽게 찾는 노하우 알려드릴게요.

    1. 정상적으로 작동하는 최소 예제를 만든다.

    2. 조금씩 코드를 추가해나가면서 특정 코드 추가시 동작안하는 상황이 있을거에요..

    그걸 찾아서 고치시면됩니다.

    질문글 올릴때도 전후 상황을 설명해주시면 답변 받기가 쉽겠죠.

    아마 그런식으로 문제들을 해결하면 대다수는 질문 없이 해결 가능하실거에요.


  • UJS
    10
    2021-04-28 13:45:44
    음... 최소한의 틀을 만든 후 만들려고 했던 기능들을 하나하나 디버그하는 수 밖에 없겟네요.. 그렇게 해보겠습니다.
  • 니르바나
    2k
    2021-04-28 14:42:50

    stackoverflow 찾아보니 초기에 toggle이벤트 거는 부분이 있던데, 그걸 안해주셔서 그럴지도 모르겠네요. 제가 Jquery는 잘몰라서 드릴 수 있는 조언이 이것뿐이네요.ㅎ

  • UJS
    10
    2021-04-28 15:02:30

    참 어이없게 해결했습니다.. 다른 모달들은 다 정상적으로 작동하는데 애만 모달이 hide기능도 안먹히고 닫기도 안되서 뭘 잘못햇지 하고 찾아봐도 안되서 싹다 지우고 새로 똑같이 작성 후 디버깅했더니 정상작용합니다 하하.. 코드를 잘못 작성한 것도아니고 에디터에다 코드 그대로 붙여놓은 다음에 보고 수기로 옮겼을 뿐인데 정상작동합니다. 그냥 단순 이클립스 버그인거같습니다. 혹여나 저처럼 안되시는분은 시간들여서 한번 다시 작성해보는 방법도 해보시길 권장드립니다.

  • 욘호
    49
    2021-04-28 15:42:43

    윈머지받으셔서 소스한번 비교해보세여 컴퓨터는 거짓말안하는뎅 ㅋㅋㅋ 아니면 빌드가 제대로....

  • 로그인을 하시면 답변을 등록할 수 있습니다.