如果不是按 OK就把 modal關閉的話,modal中輸入欄位的值要還原
如果是按 OK關閉 modal的話,檢核輸入值,檢核未過則 modal取消關閉
搜尋取消關閉 modal的範例後寫出大致如下的程式:
$('.modal').on('hide.bs.modal', function (e) {
if (CheckClosedByBtnOK()) {
if (!ValidInput()) {
e.preventDefault();
e.stopImmediatePropagation();
}
}
else {
ResetInput();
}
});
但是發現使用 datepicker選完日期並關閉小視窗後也會觸發 hide.bs.modal,導致每次選完值就還原,有選跟沒選一樣Bootstrap modal的官方文件中有說明 events還有一種 hidden.bs.modal,直接拿來套用,改成
$('.modal').on('hidden.bs.modal', function (e) { ...
現在不會選完值就還原了,也就是 hidden.bs.modal只有在 modal關閉時才會觸發,datepicker關閉時不會但是另一個問題又來了,preventDefault、stopImmediatePropagation現在無效了
因為英文不好,對 Bootstrap modal官方文件的 Events說明琢磨了一會還是看不懂差異在哪:
hide.bs.modal | This event is fired immediately when the hide instance method has been called. |
hidden.bs.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
只好寫程式來觀察:
$('.modal').on('hide.bs.modal', function (e) {
console.log(this);
console.log('hide');
}).on('hidden.bs.modal', function (e) {
console.log(this);
console.log('hidden');
});
得出 hidden.bs.modal是在 modal被關閉後才觸發,所以 preventDefault當然沒有效果hide.bs.modal是關閉前觸發,但是 modal內的 datepicker關閉時也會觸發 hide.bs.modal
所以改成先判斷 hide.bs.modal是否為 datepicker被關閉時觸發即可
var isUsingDatepicker = false;
$('.modal').on('show.bs.modal', function (e) {
isUsingDatepicker = ($(div.datepicker-dropdown).length > 0);
}).on('hide.bs.modal', function (e) {
if (!isUsingDatepicker) {
if (CheckClosedByBtnOK()) {
if (!ValidInput()) {
e.preventDefault();
e.stopImmediatePropagation();
}
}
else {
ResetInput();
}
}
isUsingDatepicker = ($(div.datepicker-dropdown).length > 0);
});