bootstrap-maxlength 总是在最前面

Question

使用 bootstrap-maxlength 插件：https://github.com/mimo84/bootstrap-maxlength

效果很好，但是当弹出 bootstrap 模态框时，此插件的剩余字符标签仍显示在模态框上方。

提前致谢。

---编辑---

main.js

$(document).ready(function){
   //textareaID is the element where i want to wrap charactercounter
   $('#textareaID').maxlength({
      showOnReady: false,
      alwaysShow: true,
      threshold: 10,
      warningClass: 'label label-success',
      limitReachedClass: 'label label-important label-danger',
      separator: ' / ',
      preText: '',
      postText: '',
      showMaxLength: true,
      placement: 'top',
      message: 'Remaining chars: %charsRemaining%',
      showCharsTyped: true,
      validate: true,
      utf8: false,
      appendToParent: true,
      twoCharLinebreak: true,
      customMaxAttribute: null,
      allowOverMax: false
   });
}

此外，插件生成的 html 如下：

<span class="bootstrap-maxlength label label-success" style="display: block; position: absolute; white-space: nowrap; z-index: 1099; top: -22px; left: 395.453px;">Remaining chars: 989</span>

Answer 1

此元素出现在 modal 之上的原因是因为它的 z-index 属性。在 Bootstrap 源代码中，有一个为公共元素定义的 z-index 属性列表：

@zindex-navbar:                 1000;
@zindex-dropdown:               1000;
@zindex-popover:                1060;
@zindex-tooltip:                1070;
@zindex-navbar-fixed:           1030;
@zindex-modal-background:       1049; /* Blurry Modal back-drop */
@zindex-modal:                  1050; /* Actual Modal */

在maxlength.js的源代码中，我们可以看到这段代码：

if (!maxLengthIndicator) {
  maxLengthIndicator = $('<span class="bootstrap-maxlength"></span>').css({
    display: 'none',
    position: 'absolute',
    whiteSpace: 'nowrap',
    zIndex: 1099 // Notice here, z-index is higher than the Bootstrap modal
  }).html(maxlengthContent);
}

如您所见，z-index 1099 大于 modal 的 1049 和 1050。如果您不希望它出现在 modal 上方，您可以更改 bootstrap-maxlength.js 并更改此生成元素的 z-index，或者在您第一次调用 .maxlength({ }) 后用 jQuery 更改它：

$('.bootstrap-maxlength').css({ z-index: 1040 });

最后，github 页面说：

The indicator badge shows up on focusing on the element, and disappears when the focus is lost.

对我来说，这意味着你的问题甚至不应该成为问题，因为 modal 的出现应该会触发你的 <textarea> 的散焦，但我没有目前测试的方法。话虽如此，当你的模式打开时，你可以在 $("#textareaID") 上触发 blur()，这应该隐藏插件生成的最大长度 <span>：

$("#exampleModal").on("shown.bs.modal", function(){
  $("#textareaID").blur();
});

希望这能为您提供一些见解。

bootstrap-maxlength 总是在最前面

bootstrap-maxlength always on top

css

jquery

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3