5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小記

　　最近公司在用bootstrap和Jquery UI作項目，相似與OA的東西前兩天碰到點問題，記錄一下。但願讀者不要在遇到和我同樣的問題。

　　1 datepicker。不知道怎麼本身下載的bootcss裏面沒找到datepicker，因而就選了Jquery UI的datepicker。使用的時候要注意兩個問題。

　　　　若是頁面上多個input ，而且id都是input1，那麼在頁面載入完成的時候調用$('#input1').datepicker(option)，獲得的結果是隻有第一個成功格式化成datepicker；若是換一種選擇器，好比$('input').datepicker(option)，那麼，每一個都能觸發datepicker的選擇效果，可是，後面的元素選中日期以後只會體如今第一個上面。

　　2 bootstrap裏面的modal。用一個button來觸發modal的時候，有兩個屬性必定不要忘記，① data-toggle='modal'  ② data-target='#myModal';順便說一下，button的type 屬性默認是submit，因此，記得賦值成button。而後是若是不想讓modal在點到灰色區域的時候就關閉的話記得設置modal的 data-backdrop = 'static'。還有就是若是modal裏面有datepicker，那麼，默認狀況下沒法在點擊input的時候顯示出datepicker的日期選擇框的。解決方案在stackoverflow有。連接戳這裏。

　　關鍵js代碼以下：

 1 // Since confModal is essentially a nested modal it's enforceFocus method
 2 // must be no-op'd or the following error results 
 3 // "Uncaught RangeError: Maximum call stack size exceeded"
 4 // But then when the nested modal is hidden we reset modal.enforceFocus
 5 var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
 6 
 7 $.fn.modal.Constructor.prototype.enforceFocus = function() {};
 8 
 9 $confModal.on('hidden', function() {
10     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
11 });
12 
13 $confModal.modal({ backdrop : false });

　　關於那段註釋，大體意思就是說modal顯示的時候必須讓modal的enforceFocus方法制空（所謂的no-op不然的話會有個異常。）。而後隱藏的時候再還原。而後我本身用的時候估計是版本不一樣的緣故，要稍微修改一下。$confModal就是本身用的modal。

　　關鍵代碼以下：

1 $.fn.modal.Constructor.prototype.enforceFocus = function () { };
2 var $configModal = $(".temple");
3 $configModal.on('hide.bs.modal', function () {
4     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
5 });

　　改變了一下modal的事件名字，查了文檔，上面給出的事件名字叫'hide.bs.modal'。若是你用的是bootcss，上面的名字仍是hide，兩個js文件不同。還有就是bootstrap觸發modal的時候不須要寫$confModal.modal({ backdrop : false });應該在button那一步就完成事件綁定了。

　　

　　雖然知道了上面的兩點，可是作頁面的時候仍是出現了modal裏面的datepicker"沒法正常顯示"，還有就是顯示了以後"沒法選中日期的問題"。後來終於明白，實際上是這個modal所在的頁面有一個PartialView和model自身的modal-content的PartialView是同一個，致使了Id的重複。外面的PartialView正常狀況下又是不顯示的，因此一會兒就不曉得問題出現的緣由了，糾結了很多時間。 好在如今解決了。至於解決方案，就是在當modal顯示出來的把modal裏面元素的id都加上一個特定的前綴。關於加前綴這件事情，由於沒注意$.find()方法其實查的是後代元素，也就是說$('<li>a</li>').find('li')其實find不到任何東西，坑了本身一下。。。