modal上にtimepickerが表示されない

Question

いつもお世話になっております

modal上でなければtimepickerは表示されるのですが、
modal上だとoption設定を基本的に変えていないのに
表示がmodal上の裏側に行って写真のようになってしまいます。
分かる方がいましたら教えて頂けると幸いです。

$(document).on('click', '.bt-ls', function(){
  modal();
});
```
```jquery
function modal(){

  // 既存のBootboxダイアログを全て閉じる
  bootbox.hideAll();

  // Bootboxダイアログを連続的に開く場合の対策
  setTimeout(function(){

    var bbxs = bootbox.dialog({
                title: "test",
                message: '<div id="loading" class="cs-loading"><img src="images/loading.gif"></div><div id="div-pdct" class="container-fluid"></div>',
                closeButton: false,
                size: "large",
                buttons: {
                  addt: {
                      label: "A",
                      className: "btn-success",
                      callback: function(){
                        showa()
                        return false;
                      }
                  },
                  cancel: {
                      label: "b",
                      className: "btn-normal",
                      callback: function () {}
                  }
              }
    });

    $("#div-pdct").html(modal_pdc());
    getMSTL();

  }, 500);

}
```
```jquery
$(document).on('click','.ontime',function(){
// TimePicker
      $('.timepick').timepicker({
        timeFormat: 'HH:mm',
        interval: 15,
        minTime: '00:00',
        maxTime: '24:00',
        //defaultTime: '0:00',
        startTime: '0:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true
      });
})
```

一部抜粋
```html
<span style="width:15%;">
 <input type="text" class="ontime input-sm timepick">H
</span>
```

Answer 1

モーダルダイアログよりも、z-index値が小さいのだと思います。デベロッパーツールで確認してみてください。

なお、modal と呼んでいるのが HTML 5.2 の dialog要素のことであれば、z-indexでは制御できませんので、timepicker 自体を別のダイアログに乗せる必要があります。

Comments

[退会済みユーザー]

回答ありがとうございます。
仰る通り、z-index値が低いだけでした…
ただ、１つ問題がありましてz-indexで変えられるのがelement.style内でなのでデバッグ中しか変更できません。
コード内で変更する方法はありますでしょうか?

また、dialog要素ではないです。

[x_x]

z-indexで変えられるのがelement.style内というのはどういうことでしょうか？
CSSで!importをつけるか、scriptから対象のスタイルを変更できませんか？
jQueryの場合はここにあります。
https://api.jquery.com/css/

[退会済みユーザー]

普通、デバッグならコードの行が出ますが、コードの行が右上に表示されなかったからです。

ありがとうございます。
jqueryにそのようなメソッドがあるのは知りませんでした。
.css()のおかげで反映させることが出来ました。
また、z-indxを反映させるにはpositionでstatic以外を設定すればいいみたいでした。

Answer 2

HTMLの記述ミスがあるようですが、転記ミスでしょうか？

 <input type="text> class="ontime input-sm timepick">
↓
 <input type="text" class="ontime input-sm timepick">

class名は拾ってこれているようですが、設定先が正しくないためinputの位置が正しく拾えないというのはあるかもしれません。

Comments

[退会済みユーザー]

申し訳ありません。
それは転載みすです。
ただいま、編集しました。

回答ありがとうございます。
確かめてみます