为什么这个jQuery颜色选择器在引导模式中失败

Why does this jQuery color picker fail within a Bootstrap modal?

本文关键字:模式 失败 选择器 jQuery 颜色 为什么      更新时间:2023-09-26

我正在使用来自 http://colpick.com/plugin 的优秀jQuery颜色选择器

它在"正常"情况下正常工作,但在 Bootstrap 3 模式中找到输入父元素时不会显示选取器。

这有效:

<div class="container">
  <div class="row">
    <div class="col-md-6">
        <input type="text" id="colorPick1" class="colorPick"/>
    </div>
  </div>
</div>

但是引导模式中的相同内容无法显示选取器:

<div class="modal-body">
    <div class="row">
        <div class="col-md-6">
            <input type="text" id="colorPick2" class="colorPick"/>
        </div>
    </div>
</div>

有没有办法在引导模式中使用此颜色选择器?

谢谢

问题是z-index只需在 css 类中添加此行即可正常工作。

.colpick {
  z-index: 9999;
}

杰斯菲德尔演示