[JQUERY] 부트 스트랩 모달로 데이터를 전달

부트 스트랩 모달로 데이터를 전달

해결법

1. ---

   1.난 당신이 jQuery를 CSTE 연구진은 이벤트 핸들러를 사용하여이 작업을 할 수 있다고 생각합니다.

   난 당신이 jQuery를 CSTE 연구진은 이벤트 핸들러를 사용하여이 작업을 할 수 있다고 생각합니다.

   여기에 테스트 할 수있는 바이올린입니다; 당신이 모달을보실 수 있습니다 가능한 한 바이올린의 HTML 프레임을 확장해야합니다.

   http://jsfiddle.net/Au9tc/605/

   HTML

   <p>Link 1</p>
   <a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
   
   <p>&nbsp;</p>
   
   
   <p>Link 2</p>
   <a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
   
   <div class="modal hide" id="addBookDialog">
    <div class="modal-header">
       <button class="close" data-dismiss="modal">×</button>
       <h3>Modal header</h3>
     </div>
       <div class="modal-body">
           <p>some content</p>
           <input type="text" name="bookId" id="bookId" value=""/>
       </div>
   </div>
   

   JAVASCRIPT

   $(document).on("click", ".open-AddBookDialog", function () {
        var myBookId = $(this).data('id');
        $(".modal-body #bookId").val( myBookId );
        // As pointed out in comments, 
        // it is unnecessary to have to manually call the modal.
        // $('#addBookDialog').modal('show');
   });
   

2. ---

   2.다음은 부트 스트랩 3.2.0 사용하는 경우 그것을 할 수있는 청소기 방법입니다.

   다음은 부트 스트랩 3.2.0 사용하는 경우 그것을 할 수있는 청소기 방법입니다.

   링크 HTML

   <a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>
   

   모달 자바 스크립트

   //triggered when modal is about to be shown
   $('#my_modal').on('show.bs.modal', function(e) {
   
       //get data-id attribute of the clicked element
       var bookId = $(e.relatedTarget).data('book-id');
   
       //populate the textbox
       $(e.currentTarget).find('input[name="bookId"]').val(bookId);
   });
   

   http://jsfiddle.net/k7FC2/

3. ---

   3.나는 그것이 mg1075의 코드 @에서 작업 구현 방법은 다음과. 나는 모달 트리거 링크 / 버튼에 할당 클래스가하지 않도록 좀 더 일반적인 코드를 원하는 :

   나는 그것이 mg1075의 코드 @에서 작업 구현 방법은 다음과. 나는 모달 트리거 링크 / 버튼에 할당 클래스가하지 않도록 좀 더 일반적인 코드를 원하는 :

   트위터 부트 스트랩 3.0.3에서 테스트.

   HTML

   <a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>
   

   JAVASCRIPT

   $(document).ready(function() {
   
     $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
   
       var data_id = '';
   
       if (typeof $(this).data('id') !== 'undefined') {
   
         data_id = $(this).data('id');
       }
   
       $('#my_element_id').val(data_id);
     })
   });
   

4. ---

   4.당신이 부트 스트랩에있는 경우 3+,이 jQuery를 사용하여 추가하면 조금 단축 할 수있다.

   당신이 부트 스트랩에있는 경우 3+,이 jQuery를 사용하여 추가하면 조금 단축 할 수있다.

   HTML

   <a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a>
   
   <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
   <div class="modal-dialog" role="dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
           </div>
           <div class="modal-body">
               Modal Body
               <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
               <button type="button" class="btn btn-primary">Yes</button>
           </div>
       </div>
   </div>
   

   JQUERY

   <script type="text/javascript">
       $(function () {
           $(".identifyingClass").click(function () {
               var my_id_value = $(this).data('id');
               $(".modal-body #hiddenValue").val(my_id_value);
           })
       });
   </script>
   

5. ---

   5.귀하의 코드는 올바른 모달 HTML 구조와 함께 일했을 것이다.

   귀하의 코드는 올바른 모달 HTML 구조와 함께 일했을 것이다.

   () {(기능 $ $ ( ". 오픈 AddBookDialog"). 클릭 (함수 () { . $ ( '# bookID로서') 발 ($ (이) .DATA ( '아이디')); $ ( "# addBookDialog") 모달 ( "쇼."); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> <링크 HREF = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"REL = "스타일"/> 열기 모달 에

6. ---

   6.부트 스트랩 4.3 - 조각 아래에서 코드를 사용 - 자세한 내용은 여기

   부트 스트랩 4.3 - 조각 아래에서 코드를 사용 - 자세한 내용은 여기

   $ ( '# exampleModal'). ( 'show.bs.modal', 기능 (이벤트)에 { 하자 bookID로서 = $ (event.relatedTarget) .DATA ( 'bookID로서') $ (이) .find ( '. 모달 바디 입력'). 발 (bookID로서) }) a.btn.btn-primary.open-AddBookDialog {색상 : 흰색} <링크 REL = "스타일"HREF = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"무결성 = "SHA384-ggOyR0iXCbMQv3Xipma34MD + DH / 1fQ784 / j6cY / iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin = "익명"> <스크립트 SRC = "https://code.jquery.com/jquery-3.3.1.slim.min.js"무결성 = "SHA384 - q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo"crossorigin = "익명"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"무결성 = "SHA384 - UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin = "익명"> <스크립트 SRC = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"무결성 = "SHA384 - JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf / nJGzIxFDsf4x0xIM + B07jRM"crossorigin = "익명"> 열기 를

   <버튼형 = "버튼"클래스 = "BTN BTN 고등학교"데이터 - 해제 = "모달"> 근접

7. ---

   7.이것은 jQuery로 쉽습니다 :

   이것은 jQuery로 쉽습니다 :

   아래의 경우에 당신의 앵커 링크입니다 :

   <a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>
   
   

   모달의 쇼 이벤트에서 당신은 다음과 같은 앵커 태그에 액세스 할 수 있습니다

   //triggered when modal is shown
   $('#modal_id').on('shown.bs.modal', function(event) {
   
       // The reference tag is your anchor tag here
       var reference_tag = $(event.relatedTarget); 
       var id = reference_tag.data('id')
       // ...
       // ...
   })
   
   
   

8. ---

   8.이것으로 시도

   이것으로 시도

   $(function(){
    //when click a button
     $("#miButton").click(function(){
       $(".dynamic-field").remove();
       //pass the data in the modal body adding html elements
       $('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
       //open the modal
       $('#myModal').modal('show') 
     })
   })
   

9. ---

   9.이것은 당신이 모달로 id_data을 보낼 수있는 방법입니다 :

   이것은 당신이 모달로 id_data을 보낼 수있는 방법입니다 :

   <input
       href="#"
       data-some-id="uid0123456789"
       data-toggle="modal"
       data-target="#my_modal"
       value="SHOW MODAL"
       type="submit"
       class="btn modal-btn"/>
   
   <div class="col-md-5">
     <div class="modal fade" id="my_modal">
      <div class="modal-body modal-content">
        <h2 name="hiddenValue" id="hiddenValue" />
      </div>
      <div class="modal-footer" />
   </div>
   

   그리고 자바 스크립트 :

       $(function () {
        $(".modal-btn").click(function (){
          var data_var = $(this).data('some-id');
          $(".modal-body h2").text(data_var);
        })
       });
   

10. ---

    10.나는이 방법이 유용 :

    나는이 방법이 유용 :

    클릭 이벤트를 만듭니다

    $( button ).on('click', function(e) {
        let id = e.node.data.id;
    
        $('#myModal').modal('show', {id: id});
    });
    

    show.bs.modal 이벤트를 만듭니다

    $('#myModal').on('show.bs.modal', function (e) {
    
         // access parsed information through relatedTarget
         console.log(e.relatedTarget.id);
    
    });
    

    특별한:

    이 같은 예를 들어 같은 속성을 구문 분석 여부를 확인하기 위해 show.bs.modal 내부 로직을 확인 : ID : (e.relatedTarget.hasOwnProperty ( 'ID') e.relatedTarget.id : 널 (null))

11. ---

    11.당신은 simpleBootstrapDialog을 시도 할 수 있습니다. 여기 등을 취소하고 제출에 대한 제목, 메시지, 콜백 옵션을 전달할 수 있습니다 ...

    당신은 simpleBootstrapDialog을 시도 할 수 있습니다. 여기 등을 취소하고 제출에 대한 제목, 메시지, 콜백 옵션을 전달할 수 있습니다 ...

from https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal by cc-by-sa and MIT license