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
 });

根据反馈更新

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

首先，我对 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 回答