解决使用bootstrap modal时，icon-picker组件被遮挡问题

背景：使用表格行内编辑时，修改和新增会弹出modal，在modal中有图标选择项（使用icon-picker完成），按照icon-picker例子配置完成后发现input的样式已经变成选择图标项，但是点击按钮没有反应，且console无报错。 f12查看html源码发现在点击icon选择按钮的时候图标选择下拉框html代码其实已经添加了，只是被modal遮挡住了。

 

解决思路：首先想到使用z-index设置999来解决，但是设置完后发现并无效果，看iconPicker.js源码发现下拉框组件append是到body的，如下面代码所示

                $popup.html('<div class="ip-control"> \
                                  <ul> \
                                    <li><a href="javascript:;" class="btn" data-dir="-1"><span class="glyphicon  glyphicon-fast-backward"></span></a></li> \
                                    <li><input type="text" class="ip-search glyphicon  glyphicon-search" placeholder="Search" /></li> \
                                    <li><a href="javascript:;"  class="btn" data-dir="1"><span class="glyphicon  glyphicon-fast-forward"></span></a></li> \
                                  </ul> \
                              </div> \
                             <div class="icon-list"> </div> \
                             ').appendTo("body");

由此可以得知，加的下拉框与modal两个块级是平级的，都是属于body下面，那下拉框块级的z-index哪怕加到1W都没用。github组件官网上发现已经有中文issue但是貌似项目已经很久没有维护了。好在iconPicker.js代码也不多，直接修改之。把appendTo改到modal下，然后修改样式文件iconpcker.css将.icon-popup的z-index改到999最终问题解决，如下图。（作为后端程序猿一枚，碰到前端问题真是有点慌，总共排查了2个多小时，遂记录之备忘。）