說真的平常只用 Boostrap 基本東西 很少深入研究這個東西 今天看到一段程式 感覺 Bootstrap 值得深入研究
remote (v4 以廢棄) 1 <a data-toggle ="modal" href ="remote.html" data-target ="#modal" > Click me</a >
可以呼叫remote.html
到#modal
裡面去 沒錯我當初看到的時候 覺得很神奇 跑去官網文件都沒有找到 結果查看了一下 v3
This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself
這麼好用的功能…,怎麼要廢棄掉???Bootstrap 3 with remote Modal - Stack Overflow 所以之後可能需要用 jQuery.load 手動載入方式
神奇清除 remote 表單 1 2 3 $("#myModal" ).on("hidden.bs.modal" , function ( ) { $(this ).removeData("bs.modal" ); });
Plunker 其實仔細觀察,開發者工具看,他會重新載入網頁 所以值都是一開始的樣子
有時候還會失敗,最好的方式就是
不過這個方法,只能適用在 remote 所以網路上只看到 v2,v3 但沒有看到 v4
修改表單小技巧 Modal · Bootstrap
平常我們重開 modal,打開兩次,第一次修改,直接取消,第二次打開後可能是第一次修改取消的值 原本 remote 方式可以輕鬆解決 但是網路上有找到用data-*
方式去紀錄
Correct approach of getting dynamic values from data-attributes with jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <button type ="button" id ="btn1" class ="btn btn-primary" data-toggle ="modal" data-target ="#exampleModal" data-title ="Post 1" > Edit </button > <div class ="modal fade" id ="exampleModal" tabindex ="-1" role ="dialog" aria-labelledby ="exampleModalLabel" aria-hidden ="true" > <div class ="modal-dialog" role ="document" > <div class ="modal-content" > <div class ="modal-header" > <h5 class ="modal-title" id ="exampleModalLabel" > New message</h5 > <button type ="button" class ="close" data-dismiss ="modal" aria-label ="Close" > <span aria-hidden ="true" > × </span > </button > </div > <form > <div class ="modal-body" > <div class ="form-group" > <label for ="title" class ="col-form-label" > Title:</label > <input type ="text" class ="form-control" id ="title" name ="title" /> </div > </div > <div class ="modal-footer" > <button type ="button" class ="btn btn-secondary" data-dismiss ="modal" > Close </button > <button type ="button" class ="btn btn-primary" onClick ="edit(this.form)" > Submit </button > </div > </form > </div > </div > </div >
1 2 3 4 5 6 7 8 9 10 11 12 13 $("#exampleModal" ).on("show.bs.modal" , function (event ) { var button = $(event.relatedTarget); var recipient = button.attr("data-title" ); var modal = $(this ); modal.find(".modal-body input#title" ).val(recipient); }); function edit (form ) { var title = form.title.value; var btn1 = document .getElementById("btn1" ); btn1.setAttribute("data-title" , form.title.value); }
但 Modal 還不只這樣 有空深入研究在寫