zoukankan      html  css  js  c++  java
  • 解决使用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个多小时,遂记录之备忘。)

  • 相关阅读:
    table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
    使用jquery触发a标签跳转
    真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
    html5 data属性的使用
    jQuery取得select选择的文本与值
    jqueryui教程
    密码复杂度
    zabbix配置微信报警
    tomcat配置域名访问
    阿里云ecs禁止ping,禁止telnet
  • 原文地址:https://www.cnblogs.com/falcon-fei/p/14202002.html
Copyright © 2011-2022 走看看