jquery – 滑块工具提示的重叠部分及其在bootstrap-slider插件中的位置

我在模态窗口中使用Twitter Bootstrap 2.3.2和bootstrap-slider插件.问题是滑块的工具提示的一部分重叠在模态窗口的标题后面并且位置错误.

我试图添加此规则,但它没有帮助.

.slider .tooltip{
    z-index: 1151 !important;
}

我想提供正确的jsfiddle,但我无法找到bootstrap-slider插件cdn.这是jsfiddle,它不起作用,因为缺少bootstrap-slider插件源.

jsfiddle

HTML

JavaScript的

$(document).ready(function () { 
            $('#nodeSize').slider({
                    formatter: function(value) {
                            return value;
                    }
            });

            $('#edgeSize').slider({
                    formatter: function(value) {
                            return value;
                    }
            });
});

最佳答案

将其添加到您的Javascript：

$("body").on("shown.bs.modal",function() {
    $("#edgeSize").slider('relayout');
    $("#nodeSize").slider('relayout');
});

说明：当显示模态时,函数relayout在两个输入字段上运行,并在初始化后再次呈现工具提示.

资料来源：https://github.com/seiyria/bootstrap-slider#functions

更新了JSfiddle：http://jsfiddle.net/0sryor13/3/