Phần chồng chéo của chú giải công cụ của thanh trượt và vị trí của anh ấy trong plugin bootstrap-slider

Question

Tôi sử dụng Twitter Bootstrap 2.3.2 và bootstrap-slider plugin trong cửa sổ phương thức. Vấn đề là một phần của tooltip của thanh trượt được chồng lên phía sau tiêu đề của cửa sổ phương thức và có vị trí sai.

Tôi cố gắng thêm quy tắc này, nhưng nó đã không giúp đỡ.

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

Tôi muốn cung cấp jsfiddle đúng, nhưng tôi không thể tìm thấy plugin plugin bootstrap-slider. Đây là jsfiddle, không hoạt động vì thiếu nguồn plugin bootstrap-slider.

jsfiddle

html

<a href="#options" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<div id="options" class="modal hide fade"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3>Settings</h3> 
    </div> 
    <div class="modal-body"> 
     Vertex size <input id="nodeSize" data-slider-id='nodeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br><br> 
     Edge size <input id="edgeSize" data-slider-id='edgeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
     <button class="btn btn-primary" id="saveSettings">Save</button> 
     </div> 
</div> 

javascript

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

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

Answer 1

Thêm phần này vào Javascript của bạn:

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

Giải thích: Khi phương thức được hiển thị chức năng relayout được chạy trên cả hai lĩnh vực đầu vào và làm cho các tooltip một lần nữa sau khi khởi tạo.

Nguồn:https://github.com/seiyria/bootstrap-slider#functions

Cập nhật JSfiddle:http://jsfiddle.net/0sryor13/3/

Answer 2

Đối với z-index để làm việc, yếu tố bạn đang áp dụng nó vào phải có vị trí khác hơn là tĩnh, ví dụ:

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