Bootstrap 模態框modal 傳值問題解決方案
阿新 • • 發佈:2018-11-25
我所遇到的問題 -> 首先先看一下案例:
1. 當點選修改按鈕時,將id的屬性傳值到Bootstrap中的模態框中.
2.然後將模態框中的id值傳值到PHP中的類方法中處理達到切換作用.
下面就是該案例的實戰程式碼:
1.首先,看一下修改頁面的php + html程式碼.
效果圖:
2.Bootstrap的模態框程式碼:
效果圖
3.jQuery監聽器,用來監聽"修改"按鈕的監聽.
這樣就實現了Bootstrap模態框的傳值問題.
另外附加例項程式碼:
<!-- layout模板 S --> {layout name="layout"/} <!-- layout模板 E --> <!-- 輪播圖展示 --> <div class="col-md-10"> <div class="panel panel-primary"> <div class="panel-heading"> <button class="btn btn-success">輪播圖展示頁面</button> </div> <div class="panel-body"> <div id="page-wrapper"> <div id="page-inner"> <div class="row"> <!-- 輪播圖 --> {volist name="all_images" id="all_images"} <div class="col-md-6 col-sm-12 col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> <span>輪播圖</span> <button class="btn btn-primary btn-xs" data-id="{$all_images['id']}" data-toggle="modal" data-target="#editimages">修改</button> </div> <div class="panel-body"> <div id="morris-bar-chart"> <img src="{$all_images['all_images']}" alt="輪播圖" style="width:100%;height: 100%"> </div> </div> </div> </div> {/volist} </div> </div> </div> </div> </div> </div> <!-- 更換輪播圖 S --> <div class="modal fade" id="editimages"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">更換輪播圖</h4> </div> <div class="modal-body"> <form action="/Blogs/public/admin/All/edit_images" method="POST" enctype="multipart/form-data"> <!-- 將Js程式碼傳來的id記錄下來 key => id(name的值,為鍵) | vlaue => id(獲取到的id) --> <input type="hidden" class="content" name="id"> <div class="form-group"> <label for="exampleInputFile">請選擇本地的圖片</label> <input type="file" id="exampleInputFile" name="file"> </div> <div class="form-group pull-right"> <input type="submit" value="更換" class="btn btn-success"> <input type="reset" value="重新選擇" class="btn btn-danger"> </div> <div style="clear:both"></div> </form> </div> </div> </div> </div> <!-- 更換輪播圖 E --> <!-- js --> <script> $('#editimages').on('show.bs.modal', function (event) { var btnThis = $(event.relatedTarget); //觸發事件的按鈕 var modal = $(this); //當前模態框 var modalId = btnThis.data('id'); //解析出data-id的內容 // 將從"按鈕"解析出來的data-id的值給"模態框"的類(.content)賦值上"按鈕"解析出data-id的內容 modal.find('.content').val(modalId); }); </script> <!-- js -->
參考部落格: https://blog.csdn.net/wuyan1001/article/details/54633030 在此致謝