颜色选择器在模式内不工作

我不能让我的颜色选择器在一个模式内工作。我尝试更改z索引并在模式显示中添加事件处理程序。通过查看控制台日志和调试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