How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?

Question

Here is the link to ClockPicker for Bootstrap: http://www.jqueryrain.com/?B83aD_dg It works perfectly; however, when I try to use it to fill in a text-input in a Bootstrap modal pop up, the clock appears behind the modal pop up. How can I get the clock picker to appear in (or in front of) the modal pop up instead? Here is an image of what happens: I've tried changing the z-index of the div to be in front; I've also tried changing the z-index of every element in `clockpicker.css` to be in front (for example: z-index: 1120). However, all this does is make the clock disappear. ```

Accepted Answer

I made a JSFiddle with your code.

As I suspected the problem is that the z-index of the modal is higher than the z-index of the clock-modal.

All you have to do in order to fix this is add this in your CSS:

```
.clockpicker-popover {
    z-index: 999999;
}
```

How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?

Solution

Problem