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

时间：2021-12-24 05:59:44

　　最近公司在用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的日期选择框的。解决方案在*有。链接戳这里。

　　关键js代码如下：

 // Since confModal is essentially a nested modal it's enforceFocus method

 // must be no-op'd or the following error results

 // "Uncaught RangeError: Maximum call stack size exceeded"

 // But then when the nested modal is hidden we reset modal.enforceFocus

 var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

 $.fn.modal.Constructor.prototype.enforceFocus = function() {};

 $confModal.on('hidden', function() {

     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;

 });

 $confModal.modal({ backdrop : false });

　　关于那段注释，大致意思就是说modal显示的时候必须让modal的enforceFocus方法制空（所谓的no-op否则的话会有个异常。）。然后隐藏的时候再还原。然后我自己用的时候估计是版本不同的缘故，要稍微修改一下。$confModal就是自己用的modal。

　　关键代码如下：

 $.fn.modal.Constructor.prototype.enforceFocus = function () { };

 var $configModal = $(".temple");

 $configModal.on('hide.bs.modal', function () {

     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;

 });

　　改变了一下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不到任何东西，坑了自己一下。。。

相关文章