Search code examples
htmlcolorssafarimodal-dialogjscolor

jscolor does not work in a bootstrap modal

I'm trying to make a modal where the color input uses jscolor (because <input type="color"> doesn't work on safari). But it seems that it doesn't work when I call the next lines, inside the <div> of a bootstrap modal. 

<script src="jscolor.js"></script>
<h2>Example 1</h2>
Color: <input class="jscolor" type="color" value="#563d7c" id="colorTexto" name="colorTexto">

Any idea on how to fix this?

Solution

  • This is due to Bootstrap's modal has z-index of 1050 but jscolor popup's z-index is 1000 (by default). You have 2 options.

    1. Overwrite value from option parameter

    var options = {
    zIndex: 1080
}
var picker = new jscolor('colorTexto', options);

    2. Set default z-index value in jscolor.js

    (ver 2.0.5 line 1029) 
this.zIndex = 1080;

    I don't think setting it 9999 is a good idea as it might affect other plug ins.