[英]How to pass data to modal in Bootstrap 3?
I've tried passing data to a modal like the example from the Bootstrap documentation on my own website but it still doesn't work? 我已经尝试过将数据传递到类似模式的数据中,例如我自己网站上的Bootstrap文档中的示例,但仍然无法正常工作?
My first guess would be that it has something to do with includes or that position of each include. 我的第一个猜测是它与包含或每个包含的位置有关。
I couldn't find out why it doesn't work so I hope you can help. 我不知道为什么它不起作用,所以希望您能提供帮助。
My modal is launched by pressing a table row. 通过按下表格行来启动我的模态。 It looks like this:
看起来像这样:
<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>
My modal looks like this: 我的模态如下所示:
<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">×</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>
This is the JavaScript that's controlling the data-id
: 这是控制
data-id
的JavaScript:
$('#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)
})
When I click the table row, the modal opens but the data-id is not inserted anywhere. 当我单击表格行时,模式会打开,但data-id不会插入任何位置。
Included files are included as listed (same order) 包含的文件按列出的顺序包含(相同顺序)
I think you can try, 我想你可以试试
id = $(event.relatedTarget).attr('data-id'); id = $(event.relatedTarget).attr('data-id'); , which I used in one of my modals.
,我在其中一种模式中使用过。
您忽略了带有模态内容的脚本标签位于调用jQuery的脚本标签上方。
Perhaps you may try my answer, hope this help. 也许您可以尝试我的答案,希望有帮助。
$(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">×</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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.