隐藏在引导模式后面的 Codemirror 自动完成答案

【问题标题】：Codemirror Autocomplete hidden behind bootstrap modal隐藏在引导模式后面的 Codemirror 自动完成
【发布时间】：2016-04-04 22:12:38
【问题描述】：

我在引导模式中遇到 codemirror 自动完成问题，它隐藏在模式后面。所以它可以工作，但不会出现在顶部。

到目前为止，我已经尝试过使用 css 修改，例如：

.codeMirror-hints, .CodeMirror-hint, .CodeMirror-hint-active { 
    z-index:2147483647 !important;
    position:relative !important;
    background:white!important; 
}

但是类似这个解决方案的任何东西都不起作用，尝试了两个

位置：绝对

和

位置：相对

但没有运气。如果有帮助，我正在使用 bootstrap 3.0 和 codemirror 5.20.0。 codemirror 的烦人之处在于，一旦我尝试检查元素，自动完成功能就会消失。我正在使用 Chrome 最新的 Build 和 Firefox 都遇到同样的问题。

编辑：

下面是codemirror在modal show上的代码：

$('#cssModal').on('shown.bs.modal',function(){
            var textArea = document.getElementById('pageCss');
            var editor = CodeMirror.fromTextArea(textArea, {
                theme: 'monokai',
                extraKeys: { "Ctrl-Space": "autocomplete" },
                mode:{name: "text/css", globalVars: true},
                lineNumbers: true,
                htmlMode:true
            }); 
        });

以下是模态弹窗：

<div class="modal fade" id="cssModal" tabindex="-1" role="dialog" aria-labelledby="cssModal-label" 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="cssModal-label">@("<style>")</h4>
                </div>
                <div class="modal-body">
                    <textarea name="page_css" id="pageCss" class="form-control addon" rows="10">@Html.Raw(!string.IsNullOrEmpty(Model.page_css) ? Model.page_css : " ")</textarea>
                </div>
                <div class="modal-header">
                    <h4 class="modal-title">@("</style>")</h4>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>

codemirror 插件序列

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/codemirror.min.js"></script>    
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/show-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/xml-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/html-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/css-hint.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/javascript-hint.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/css/css.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>

仅供参考：我正在使用 asp.net mvc，如果有帮助的话。

【问题讨论】：

您是否加入了show-hint.css？你有影响引导模式的 CSS 规则吗？我在本地尝试并解决了您的问题，将.CodeMirror-hints{z-index: 1000000;} 添加到我的风格中。也许您可以添加更多代码来显示您的导入和代码镜像代码。
我将很快添加代码，但我已经添加了所有插件，并且它们在非模态元素中工作，所以它不是插件问题。我还跟踪了 modal 后面的弹出窗口，所以它显然是一个 z-index 问题。
我已经更新了代码，我仍然有这个问题。也许这段代码会给你更深入的了解

标签： css twitter-bootstrap autocomplete codemirror codemirror-modes

【解决方案1】：

我终于让它工作了，从没想过类名区分大小写可能是 css 中的问题，我只需要替换

.codeMirror-提示

到

.CodeMirror-提示

发生了多么奇怪的事情。

【讨论】：

【解决方案2】：

作为旁注，如果您在引导模式窗口中使用 lint，它会起作用，但消息会出现在窗口后面。在 lint.css 文件中搜索这个 .CodeMirror-lint-tooltip 并在 z-index 中相应地修改它。这篇文章让我找到了正确的方向，谢谢！！

【讨论】：