самозагрузка-MaxLength всегда на вершине

Question

Использование самозагрузки-MAXLENGTH плагина: https://github.com/mimo84/bootstrap-maxlength

Она работает довольно хорошо, но когда самозагрузки модальная хлопает в, оставаясь этикетки характера этого плагина еще показываются над модальным.

Заранее спасибо.

--- Edit ---

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 больше, чем 1049 и 1050. Если вы не хотите, чтобы это отображалось над modal, вы можете изменить bootstrap-maxlength.js и изменить z-index этого сгенерированного элемента или изменить его с помощью jQuery после вашего вызова .maxlength({ }) впервые:

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

Наконец, github страница говорит:

Индикатор значок показывает на фокусирование на элементе, и исчезает, когда фокус теряется.

Который, ко мне, значит, ваш вопрос не должен даже быть проблемой, так как modal появление должно вызывать де-фокус вашего <textarea>, но у меня нет никакого способа проверить, что в настоящее время. При этом, вы могли бы вызвать blur() на $("#textareaID") при открытии вашего модальное, который должен скрыть MaxLength <span> порожденного плагин:

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

Надеется, что это дает некоторое представление для вас.