背景：使用表格行內編輯時，修改和新增會彈出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個多小時，遂記錄之備忘。）