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模式对话框中的元素上。 / p>

有人知道这是否可行？我知道如何为标准表单输入元素执行此操作。它只是没有出现在我的模态对话框中。

这是我试图用来实现这一目标的。 http://file.urin.take-uma.net/jquery.balloon.js-Demo.html

感谢。

Answer 1

您的问题可能是您没有正确设置气球的z-index高于模态对话框。

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

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

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

根据反馈进行更新

我的回答非常接近正确。您的代码实际上存在两个问题，以及您没有看到气球的原因。

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

#pin {
 z-index: 99999
}

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

气球的默认内容是它的标题。如果元素没有标题，气球未创建。

由于您未在选项中提供内容，因此无法显示任何气球，因为它无法显示任何内容。因此，由于您是根据您的密码框显示它，您必须添加内容选项，或在密码框中添加标题。像这样：

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

我创建了一个little demo on jsfiddle来展示所有内容是如何组合在一起的。

jQuery气球

1 个答案: