說真的平常只用 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;
////// insert into database
var btn1 = document.getElementById("btn1");
btn1.setAttribute("data-title", form.title.value);
}
|
但 Modal 還不只這樣
有空深入研究在寫