玉ねぎ

jQuery UI datepickerz-indexがデフォルトで1になる問題を解決します。



Solve Problem That Jquery Ui Datepicker Z Index Defaults 1



最近、ページの日付選択コントロールがページヘッダーによってブロックされるという問題が発生しました。クライアントのコンピューターはワイドスクリーン、ナロー、ナローであり、画面が小さいため、日付選択コントロールをクリックしたときに月を選択することはできません。図：



この問題の原因を分析します。

ページのヘッダー部分のz-indexは11に設定され、ポジショニング部分（ドキュメントフロー>レシート登録）とメインタイトル部分（レシート登録）のz-indexは両方とも10に設定され、z-コンテンツ部分のインデックスが9に設定されているJQueryUIの組み込みポップアップ日付選択ボックスのz-index値は$（input）.zIndex（）+ 1であるため、z-indexは10に等しくなります。ページヘッダーによってブロックされる日付選択ボックス。



分析後、会社全体のUIフレームワークのz-indexシステムは、ポップアップメニューボックスを作成した右上隅などの他のモジュールにも設計されているため、調整には適していません。ユーザーにヘルプを提供し、パスワード、終了、ヘッダー部分を配置しようとすると、z-indexは10に設定されますが、ポップアップはブロックされます。

そこで、日付選択ボックスのz-indexを変更することにしました。



[方法1] :( JQuery UI.CSSスタイルファイルを変更する）システム全体のすべての時間選択コントロールを均一に調整できます。これは、最終的な選択方法でもあります。

jquery-ui.cssファイルを見つけ、ui-datepickerを見つけ、z-index：21を追加します！重要（値が大きくなる可能性がある場合、多くの人が9999に設定しますが、あまり示唆的ではありません。日付の選択よりも多くなる可能性がありますcontrolレベルが高い）jquery-ui.min.cssファイルを同時に変更し、最後にこのmin.cssファイルを使用することを忘れないでください。

.ui-datepicker { width: 17em padding: .2em .2em 0 display: none z-index:21 !important /*Solve the problem that the date selection control is blocked*/ }

[方法2]：日付ピッカー制御ページを使用してJSのスタイルを制御しますが、この方法は単一のページにのみ適しており、他のページは影響を受けません。ページのシステムが大きい場合、これはより複雑になります（方法3は同じです）

<p>date:<input type='text' id='mydatepicker' style='position: relative'>p>
 $('#mydatepicker').datepicker({ monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], dayNamesMin: [' ', ' ', ' ', ' ', 'four', 'five', 'six'], dateFormat: 'yy-mm-dd', beforeShow: function () { setTimeout( function () { $('#ui-datepicker-div').css('z-index', 21) }, 100 ) } })

【方法3】

 $('#mytimepicker').datetimepicker({ beforeShow:function(input) { $(input).css({ 'position': 'relative', 'z-index': 999999 }) } })

転載：https：//www.cnblogs.com/XWCloud/p/6668625.html