[부트스트랩] 모달 값 전달하는 방법 버튼이나 A테그 사용해서 처리하는 방법

 

위와 같이 '6'이란 숫자를 전달하고 싶을때 처리하는 절차입니다.

웹의 어떤 요소를 클릭했을때 모달창을 띄워주고 싶을때 하는 방식으로.....

사용하는 방법입니다.

 

기본적인 정보 html 부트스트랩 소스

<div class="container">  

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">작품정보 상세정보</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
  <input type="text" name="test" id="test" value=""/>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

 

눌렀을때 동작을 설정해 준다.

<script>
$(document).on("click", "#OrderDialog", function () {
     var num = $(this).data('id');
     $(".modal-body #bookId").val( num );
     // As pointed out in comments, 
     // it is superfluous to have to manually call the modal.
     $('#myModal').modal('show');
});
</script>

 

실행하니 위의 결과물이 잘 나옵니다.

오늘도 즐거운 코딩~