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不到任何东西，坑了本身一下。。。