5

モーダル ウィンドウでTwitter Bootstrap 2.3.2 とbootstrap-sliderプラグインを使用します。問題は、スライダーのツールチップの一部がモーダル ウィンドウのヘッダーの後ろに重なり、位置が間違っていることです。

ここに画像の説明を入力

このルールを追加しようとしましたが、役に立ちませんでした。

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

正しい jsfiddle を提供したいのですが、bootstrap-slider プラグイン cdn が見つかりません。これは jsfiddle ですが、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;
                    }
            });
});
4

2 に答える 2

2

z-index が機能するには、それを適用する要素が static 以外の位置にある必要があります。たとえば、

.slider .tooltip{
    position: relative;
    z-index: 1151 !important;
}
于 2014-11-08T19:21:26.210 に答える
2

これを Javascript に追加します。

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

説明:モーダルが表示されると、両方の入力フィールドで関数再レイアウトが実行され、初期化後にツールチップが再度レンダリングされます。

ソース: https://github.com/seiyria/bootstrap-slider#functions

更新された JSfiddle: http://jsfiddle.net/0sryor13/3/

于 2015-06-03T13:31:32.460 に答える