Twitter Bootstrap提示框出现在模态框后面

7

我有一个带有input-group中span的工具提示,它显示在主模态div后面的模态弹出窗口中。

这是我的表单组内的工具提示。

<div class="form-group margin-none innerB">
<label for="form_field_name" class="col-sm-3 control-label">label</label>
<div class="col-md-9">      
    <div class="input-group">
        <input type="text" id="form_field_name" name="form_field_name" class="form-control" value="0" readonly="readonly" />
        <span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="tooltip text"><i class="fa fa-question-circle"></i></span>
    </div>
</div>

这是我的模态框:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="modalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">
            <div id="modal_body" class="modal-body padding-none">
                <div class="lead separator center relativeWrap">
                    <p class="innerTB margin-none">
                        <i class="fa fa-fw fa-spinner fa-spin"></i> loading
                    </p>
                </div>          
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>          
</div>

已解决

我通过更改以下内容来解决问题:

data-container="body"

for:

data-container=".modal-body"
2个回答

3

对话框的 z-index 值较高,请检查其 z-index 值,并将工具提示的 z-index 值设置为比它更高。这可能会解决问题。


1
如果我更改z-index,则在label标记中使用tooltip,它会起作用。 但是,label标记有一些内容,它消失了。 只有提示显示。 此外,我没有使用data-container =“body”。
更新:
我添加了CSS文件position:fixed;现在,标签和工具提示都显示出来了。
.tooltip { 
    z-index: 100000000 !important;
    position: fixed;
}

根据我的情况,我改变了z-index的值。


1
请在回答中附上用户提出问题的代码片段。 - Dilip D

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接