jQuery Keypad z-index issue with a modal dialog

Question

Hi everyone,

I'm using a jQuery modal dialog (see link) with an element that uses jQuery keypad (link). Firebug shows me that the keypad is coming up but behind the dialog. I tried using bgiframe() but it doesn't work. What could be wrong?

$('.dialog').find('#test').keypad();
$('#keypad-div').bgiframe();

keypad-div is the div that holds the keypad according to firebug.

Short version of keypad that shows up when the input area is clicked from Firebug:

<div id="keypad-div" class="" style="position: absolute; top: 118.517px; width: auto; left: 515.75px; display: block;">
<div class="keypad-row"> etc.
</div>
<div class="keypad-row"> etc.
</div>
<div class="keypad-row"> etc.
</div>
<div class="keypad-row"> etc.
</div>
<div style="clear: both;"/>
</div>

and the keypad entry input box:

<input id="test" class="hasKeypad" type="text" name="test" readonly=""/>

Answer 1

bgiframe() is an IE6 fix (and only IE6; doesn't work on other browsers).

Did you tried to change the z-index property for #keypad-div to a higher value (like 9999) ?