0

jQueryモーダルダイアログに含まれるテキスト入力でjQueryバルーンを使用できるかどうか知っている人はいますか?

<div id="dlg-clock_in_out">
  <section class="roundbox-sml" style="padding:5px; 5px;">
    <input type="hidden" name="empid" id="empid" value="" />
    <div style="width:100%; text-align:center;">
      <label for="pin">PIN: </label><input type="password" name="pin" id="pin" maxlength="4" size="5" value="" />
    </div>
    <div id="login-btns-wrapper">
      <input type="button" id="loginSubmit" class="buttons roundbox-sml" value="<?=$btn_text?>" />
      <input type="button" class="buttons roundbox-sml" name="loginCancel" id="loginCancel" value="Cancel" />
    </div>
  </section>
</div>

<script type="text/javascript">
  $('#pin').keypress(function(e) {
    if(check_pin_chars(String.fromCharCode(e.which))) {
      $(this).val('');
      $(this).balloon({
        position     : "top right",
        showDuration : 125,
        minLifetime  : 2000,
        tipSize      : 4
     });

     $(this).showBalloon();
   }
});

そして、このモーダル ダイアログが表示されたときに使用したい jquery は、入力フィールドの横にバルーンを配置することになっていますが、jquery モーダル ダイアログに存在する要素にバルーンが存在できるかどうかはわかりません。

これが可能かどうか誰にもわかりますか？標準フォームの入力要素に対してそれを行う方法を知っています。モーダルダイアログに表示されないだけです。

これを達成するために私が使用しようとしているものは次のとおりです。http://file.urin.take-uma.net/jquery.balloon.js-Demo.html

ありがとう。

4

1 に答える 1

1

問題は、バルーンの z-index をモーダル ダイアログよりも高く設定していないことにある可能性があります。

$('.balloon').css('z-index','9999');

また、JavaScript のオプションである可能性もあります (自分で作成したライブラリを使用しているのか、他の場所で見つけたライブラリを使用しているのかわかりません)。

$(this).balloon({
    position     : "top right",
    showDuration : 125,
    minLifetime  : 2000,
    tipSize      : 4,
    z-index      : 9999
 });

フィードバックに基づく更新

私は私の答えにかなり近かった。コードには実際には 2 つの問題があり、バルーンが表示されない理由があります。

まず、z-index については正しかった。ただし、バルーン オプションで直接ではなく、CSS で z-index を設定する必要があります。したがって、あなたの場合は次のようになります。

#pin {
 z-index: 99999
}

ただし、他の問題はデフォルトのオプションに起因します。jquery.balloon.js サイトのドキュメントのキーワードは次のとおりです。

バルーンのデフォルトのコンテンツはそのタイトルです。要素にタイトルがない場合、バルーンは作成されません。

オプションでコンテンツを指定しなかったため、表示できるものが何もないため、バルーンは表示されません。したがって、PIN パスワード ボックスに関して表示しているため、コンテンツ オプションを追加するか、パスワード ボックスにタイトルを追加する必要があります。このようなもの：

<input type="password" name="pin" id="pin" maxlength="4" size="5" value="" title="Correct Pin!" />

すべてがどのように組み合わされるかを示すために、jsfiddle で小さなデモを作成しました。

于 2012-07-28T04:29:50.190 に答える