jQuery balloons

Question

有人知道你是否可以在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

谢谢。

Answer 1

您的问题可能是您没有正确地将气球的z索引设置为高于模式对话框。

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

它也可能是你的JavaScript的一个选项（我不知道你是在使用你写的库还是在其他地方找到的库）：

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

基于反馈的更新

我的回答非常正确。实际上，您的代码有两个问题，以及为什么您没有看到气球。

首先，我对z指数的看法是正确的。但是，您必须在CSS中设置z索引，而不是直接在气球选项中设置。所以，在你的情况下，它将是：

#pin {
 z-index: 99999
}

然而，您遇到的另一个问题来自于您的默认选项。以下是jquery.balloon.js网站上文档中的关键措辞：

引出序号的默认内容是其标题。如果元素没有标题，不会创建引出序号。

因为您没有在选项中提供内容，所以您不会看到任何气球，因为它无法显示任何内容。因此，由于您是根据pin密码框来显示它的，因此您必须添加一个内容选项，或者在密码框中添加一个标题。类似这样的东西：

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

我在jsfiddle上创建了一个小演示来展示一切是如何结合在一起的。