搜索

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


发布时间: 2022-11-24 18:39:00    浏览次数:34 次

背景:使用表格行内编辑时,修改和新增会弹出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个多小时,遂记录之备忘。)

 

 

免责声明 解决使用bootstrap modal时,icon-picker组件被遮挡问题,资源类别:文本, 浏览次数:34 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 06:39:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/falcon-fei/p/14202002.html