モーダル画面にjQuery Keypadを使うと画面の後ろに隠れてしまう

Question

モーダルウィンドウを表示し、jQuery Keypadを使用すると、モーダルウィンドウの後ろにキーパッドが表示されて隠れてしまいます。

手前に表示する方法をどなたか知らないでしょうか？

モーダルウィンドウはjQuery uiを使用しています。
プログラムを記述します。
ちなみに下記z-indexの設定をしてもダメでした。
#suuはあくまでinputであってキーパッド本体ではないのでしょうね・・・。

$("#dlg").css('z-index','1');
$("#suu").css('z-index','1000');

html　ダイアログ

<div id="dlg"> <form> <table> <tbody> <tr> <th>数量</th> <td><input type="text" id="suu"></td> </tr> </tbody> </table> </form> </div> -------

javascript ダイアログ

$('#dlg').dialog({
autoOpen: false,
bgiframe: true,
width: 600,
position: 'center',
modal: true,
show: 'bind',
hide: 'bind',
});

//ボタンを押すとダイアログを表示
$('#dlg').dialog('open');

---

javascript inputのidにキーパッド関連付け

$("#suu").keypad({
layout: ['789','456','123','.0'+$.keypad.BACK],
keypadOnly: false,
showOn: 'both',
buttonImage: '/img/keypad.png'
}).keypad('option', 'backText', 'C');

javascript キーパッド本体　
＊10000文字を超える為、掲載できませんでした。参照をお願いします。

Base
を表示して、ソースを表示して「<script src="js/jquery.keypad.js"></script>」
のリンク先を開くを参照できます。

Comments

[defghi1977]

具体的なコードを提示することで, より的確なアドバイスが得られるかもしれません.

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

キーボードのz-indexをモーダルのものよりも大きく取れば良いのでは？

Comments

[behoimi80]

返信ありがとうございます。言わんとすることは分かりますので、いろいろと試しておりますなかなかうまくいきません。おそらくプラグインjqueryファイルの中を触らないといけないと思うのですが、複雑すぎて。。。
とりあえず、チャレンジしてみます。ヒントを教えて下さりありがとうございました。

Answer 2

あまり難しく考えることはないです。

.keypad-popup {
  z-index: 1051;
}

Comments

[behoimi80]

出来ましたー！！cssファイルを見落としてました。
助かりました。大変ありがとうございました。