bootstrapのmodalでdatepickerのカレンダーが出ない
2017-02-15タイトルの通りですが、bootstrap標準のmodal.jsを使用して表示したモーダル上で、bootstrap-datepicker.jsを使用した日付入力欄を配置した際に、テキストエリアにフォーカスしてもカレンダー(ぴろっと下に出てくるやつ)が出てこなかったので、その対処方法です。
html
<div class="modal modal-warning fade" id="modal-id" tabindex="-1" role="dialog" aria-labelledby="modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-label">MODAL TITLE</h4>
</div>
<form role="form" action="" method="post">
<div class="modal-body">
<div class="form-group">
<label>DATE</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datepicker-form" id="datepicker" name="input_date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline pull-left" data-dismiss="modal">CANCEL</button>
<button type="submit" class="btn btn-outline" disabled="disabled" id="cmp-btn">OK</button>
</div>
</form>
</div>
</div>
</div>
こんな感じで、モーダル内に日付入力用のテキストボックスを配置している状態でした。
ちなみに、datepickerのカレンダー部分のソースは以下(のような形)。
<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" style="display: block; top: 160.333px; left: 417.167px;">
...
</div>
原因
原因は、モーダル(.modal)のz-indexのほうが、datepickerのカレンダー(.datepicker.dropdown-menu)のz-indexよりも大きかったからです。
.modal {
z-index: 1050;
}
.datepicker.dropdown-menu {
z-index: 1000;
}
対策
元のcssは触りたくないので、無理やりですが以下のjsで対応しました。
$('.datepicker-form').focus(function(){
$('.datepicker-dropdown').css("z-index", "1060");
});
comments powered by Disqus