It has been 1278 days since the last update, the content of the article may be outdated.
Bootstrap Modal 傳遞資料
創建基本 modal
<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#exampleModal" data-id="example">點擊查看效果</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">取得資料</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <form method="POST" action=""> <input type="text" name="targetID" value=""> <button type="submit" class="btn btn-primary submit">送出</button> </form> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> </div> </div> </div> </div>
|
點擊時傳遞 data-id 資料
$(function () { $("#exampleModal").on("show.bs.modal", function (e) { var targetID = $(e.relatedTarget).data("id"); $(e.currentTarget).find("input[name=targetID]").val(targetID); }); });
|
完整範例程式碼