解決使用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個多小時,遂記錄之備忘。)

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章