11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

BootstrapのモーダルでjQueryUIのDatepickerのz-index問題を解消する小技

Last updated at Posted at 2016-02-15

モーダル中の入力フォームでDatepickerを使う際に、Datepikcerがモーダルの後ろに隠れてしまう問題を解消したい。

この問題の原因はDatepikcerに指定されているz-indexの値がモーダルのz-indexより小さい値で設定されていることが原因。この問題の解消手段は幾つかある。

今まではこうだった。

この問題お決まりの解消方法となっているので今更書くべきことではないが、以下の様なCSSを付与して解消する。

.ui-datepicker { z-index: xxx(数値) !important; }

CSSでz-indexを大きな値で固定する。これで解消可能なら手っ取り早いが、モーダルのz-indexが変化したりすることもあって調整が難しかったりする。

そうだ。z-indexは動的に設定させよう。

JSを使って動的にz-indexを指定させる処理にする

というわけで動的にする処理をさくっと書く。

$('input.datepicker').datepicker({
    beforeShow: function(input, inst){
        setTimeout(function(){
            $('#ui-datepicker-div')
            .css(
                'z-index',
                String(parseInt($(input).parents('.modal').css('z-index'),10) + 1)
            );
        },0);
    }
});

何をしているかというと、選択されたinputのz-indexを取得してそれを+1した値をDatepikcerのz-indexとして与えている。いちいちz-indexの値を考えなくても良くなるのでシンプルです。

思う所

setTimeoutにCSSの!importantと同じ役目をさせているのがちょっと気持ち悪いが、cssTextで!importantを設定するとそれまで設定されたスタイルを捨ててしまう。

捨ててしまうスタイルを再設定するのがめんどくさいのでsetTimeoutで回避しているのがちょっとモヤモヤ_(:3」∠)_

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?