15

ツイッターブートストラップの例に基づいたモーダルを使用しています。selectedを使用するselect要素があります。選択した選択がドロップダウンすると、モーダルフッターによって切り取られます。選択した要素にz-index値を追加しようとしましたが、何も機能しません。私はそれを傾けて見ています、そしてそれはselect要素がモーダルフッターdivの前にあるdivを持っているという理由だけであるのだろうか？選択したデフォルトのCSSを使用しており、これにもブートストラップを使用しているため、何も変更していません。

例。 ここに画像の説明を入力してください

HTML：

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3>
                    Add Tag</h3>
            </div>
            <div class="modal-body">
                <div class="control-group">
                    <label for="addedTags">
                        Add tags (separated by commas)
                    </label>
                    <input id="addedTags" style="width: inherit" type="text">
                </div>
                <div class="control-group">
                    <label for="deleteTags">
                        Delete tags
                    </label>
                    <select style="display: none;" class="tags chzn-done" id="deleteTags" multiple="multiple" name="deleteTags"><option value="49">Accessories</option>
    <option value="69">AG_Adriano_Goldschmied</option>
    <option value="37">BCBG</option>
    <option value="38">Bebe</option>
    <option value="45">Bernie_Dexter</option>
    <option value="19">Black</option>
    <option value="6">Blue</option>
    <option value="66">Body-Con</option>
    <option value="71">Casual</option>
    <option value="39">Christian_Louboutin</option>
    <option value="64">Clear</option>
    <option value="50">Coach</option>
    </select><div style="width: [object Object]px;" class="chzn-container chzn-container-multi chzn-container-active" id="deleteTags_chzn">
<ul class="chzn-choices"><li class="search-field"><input value="Select Some Options" class="default" autocomplete="off" style="width: 149px;" type="text"></li></ul>
<div class="chzn-drop" style="left: 0px; top: 29px;"><ul class="chzn-results"><li id="deleteTags_chzn_o_0" class="active-result highlighted" style="">Accessories</li><li id="deleteTags_chzn_o_1" class="active-result" style="">AG_Adriano_Goldschmied</li><li id="deleteTags_chzn_o_2" class="active-result" style="">BCBG</li><li id="deleteTags_chzn_o_3" class="active-result" style="">Bebe</li><li id="deleteTags_chzn_o_4" class="active-result" style="">Bernie_Dexter</li><li id="deleteTags_chzn_o_5" class="active-result" style="">Black</li><li id="deleteTags_chzn_o_6" class="active-result" style="">Blue</li><li id="deleteTags_chzn_o_7" class="active-result" style="">Body-Con</li><li id="deleteTags_chzn_o_8" class="active-result" style="">Casual</li><li id="deleteTags_chzn_o_9" class="active-result" style="">Christian_Louboutin</li><li id="deleteTags_chzn_o_10" class="active-result" style="">Clear</li><li id="deleteTags_chzn_o_11" class="active-result" style="">Coach</li></ul></div></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">
                    Close</button>
                <input class="btn btn-primary" id="btnAddTags" value="Save" type="button">
                <span class="loader"></span>
            </div>
            <div class="alert alert-error hide">
                <button type="button" class="close" data-dismiss="alert">
                    ×</button>
                <strong>Error</strong> <span class="alert-msg"></span>
            </div>
            <div class="alert alert-success hide">
                <button type="button" class="close" data-dismiss="alert">
                    ×</button>
                <strong>Success</strong> <span class="alert-msg"></span>
            </div>
4

2 に答える 2

20

z-indexを機能させるには、position = Relative、absolute、またはfixedも設定する必要があります。また、5000のようなz-indexを置くことは役立つかもしれません。（モーダルは2000年代のazインデックスにあります。

だからあなたのCSSに私はこれを追加します：

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

編集： .modal-bodyクラスには overflow-y: autoプロパティがあります。これを次のように変更する必要がある場合があります。

.modal-body {
    overflow-y:visible;
}
于 2012-12-07T18:17:20.370 に答える
2

私も同じ問題を抱えていて、@hajpojを動作させることができませんでした。私は次のcssを設定することでそれを機能させました：

.modal-body { 
    position: static; 
}
于 2013-08-15T12:20:34.350 に答える