Question

我无法让我的颜色选择器在模式中工作。我尝试过更改z-index并在模式显示中添加事件处理程序。查看控制台日志并调试JavaScript，我可以验证事件是否有效，但颜色值和滑块位置没有更新。

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-body text-center">
              <div class="color_picker_dialog" draggable="false">
                     <div class="hue_bar">
                          <div class="hue_picker"> </div>
                      </div>
                      <div class="sat_rect" draggable="false">
                           <div class="white"></div>
                           <div class="black"></div>
                           <div class="sat_picker"></div>
                      </div>
                      <div class="bottom">
                           <div class="color_preview"></div>
                       <input type="text" onkeyup="changeHex(this.value)" value="#FF0000" />
                      </div>
                  </div>                      
             </div>
        </div>
    </div>
</div>

带有工作颜色选择器和非工作模式版本的快速示例：

JSFiddle

Answer 1

如果要使用模式内部的颜色选择器事件，则可以*在显示模式之后初始化监听器和选择器逻辑。

您可以使用

$('#myModal').on('shown.bs.modal', function() {
  // ... init all your modal here
});

工作示例：https://jsfiddle.net/pz2Lams9/

请注意，上面的代码不是内存泄漏保存的，因为每次您显示模式时都会添加侦听器。此时，您可以修改代码并重新考虑使用交互逻辑连接客户端组件的方式。

编辑：您还可以使用hidden.bs.modal断开与侦听器的连接并刷新变量。

读物：

https://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp

https://getbootstrap.com/docs/4.1/components/modal/#events

https://getbootstrap.com/docs/3.3/javascript/#modals-events

注意：

*我之所以写“可能”，是因为我不是100％肯定这是否是唯一的方法，或者是否还有其他解决方法。

拾色器在模态内部不起作用

1 个答案: