如何將數據傳遞給Bootstrap 3中的模態？

Question

我試過將數據傳遞給像我自己的網站上的Bootstrap文檔中的示例，但它仍然不起作用？

我的第一個猜測是它與包含或每個包含的位置有關。

我找不出爲什麼它不起作用，所以我希望你能幫助。

我的模式是通過按表格行啓動的。它看起來像這樣：

<tr data-toggle="modal" data-id="' . $trans['id'] . '" data-target="#transferModal"> 
    <td>' . $trans['id'] . '</td> 
    <td>' . $trans['restaurant'] . '</td> 
    <td>' . $trans['korer'] . '</td> 
    <td>' . $trans['dato'] . '</td> 
    <td>' . $trans['tillader'] . '</td> 
    </tr> 

我的模式是這樣的：

<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-labelledby="transferModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <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="exampleModalLabel">New message</h4> 
     </div> 
    <div class="modal-body"> 
    <form> 
     <div class="form-group"> 
     <label for="recipient-name" class="control-label">Recipient:</label> 
     <input type="text" class="form-control" id="recipient-name"> 
     </div> 
     <div class="form-group"> 
     <label for="message-text" class="control-label">Message:</label> 
     <textarea class="form-control" id="message-text"></textarea> 
     </div> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Send message</button> 
    </div> 
</div> 

這是控股的JavaScript中的data-id：

$('#transferModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) // Button that triggered the modal 
    var recipient = button.data('id') // Extract info from data-* attributes 
    var modal = $(this) 
    modal.find('.modal-title').text('New message to ' + recipient) 
    modal.find('.modal-body input').val(recipient) 
}) 

當我點擊錶行，模式打開但數據標識未插入任何地方。

包含的文件包括爲上市（順序相同）

• bootstrap.css //頭包括
• 的style.css //自己的CSS文件 - 包括在頭
• jquery.min .js文件//最後在文件中包含
• bootstrap.js //包括上次在文件

Answer 1

您忽略了帶有模式內容的腳本標記位於調用jQuery的腳本標記之上。

Answer 2

我想你可以試試，

id = $（event.relatedTarget）.attr（'data-id'）;，我在其中一個模態中使用。

Answer 3

也許你可以試試我的答案，希望對你有所幫助。

$(document).ready(function(){ 
 
    $(".thehide").hide(); 
 
    $(document).on("click", "table button", function(){ 
 
    $("#trigger_modal").trigger("click"); 
 
    $("#myModal .modal-title").html("COMPLETE INFO"); 
 
    $("#myModal .modal-body").html($("#partial_container").html()); 
 
    $('#myModal input[name="fullname"]').val($(this).closest("tr").find("td:nth-child(1)").text()); 
 
    $('#myModal input[name="age"]').val($(this).closest("tr").find("td:nth-child(2)").text()); 
 
    $('#myModal input[name="civil_status"]').val($(this).closest("tr").find("td:nth-child(3)").text()); 
 
    
 
    }); 
 
    
 
});

.thehide{display: none;} 
 
.display_table{display: table;} 
 
.center{margin-left: auto; margin-right: auto;} 
 
.margin_zero{margin: 0px !important;} 
 
.text_align_center{text-align: center;} 
 
.text_align_left{text-align: left;} 
 
.text_transform_uppercase{text-transform: uppercase;} 
 
.divider{height: 15px; width: 100%; clear: both; float: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<table class="table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text_align_left text_transform_uppercase">Full Name</th> 
 
     <th class="text_align_center text_transform_uppercase">Age</th> 
 
     <th class="text_align_center text_transform_uppercase">Gender</th> 
 
     <th class="text_align_center text_transform_uppercase">Civil Status</th> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="text_align_left">Full Name 1</td> 
 
     <td class="text_align_center">20</td> 
 
     <td class="text_align_center">Single</td> 
 
     <td> 
 
     <div class="display_table center"> 
 
      <button class="btn btn-sucess">View</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="text_align_left">Full Name 2</td> 
 
     <td class="text_align_center">15</td> 
 
     <td class="text_align_center">Widow</td> 
 
     <td> 
 
     <div class="display_table center"> 
 
      <button class="btn btn-sucess">View</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 

 
<!-- Button trigger modal --> 
 
<button type="button" id="trigger_modal" class="thehide btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <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"></h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- the partial container --> 
 

 
<div class="thehide" id="partial_container"> 
 
    <form> 
 
    <fieldset> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <label>FULL NAME:</label> 
 
       <input type="text" name="fullname" class="form-control" /> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <label>AGE:</label> 
 
       <input type="text" name="age" class="form-control" /> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <label>CIVILS STATUS:</label> 
 
       <input type="text" name="civil_status" class="form-control" /> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 
    <div class="divider"></div> 
 
    <div class="display_table center"> 
 
      <button class="btn btn-sucess">Save</button> 
 
     </div> 
 
    </form> 
 
</div>