javascript - 当另一个 Bootstrap 模型已经显示时，Twitter Bootstrap Modals 不起作用

Question

我有一个 Bootstrap 模式，我创建如下所示。我调出 Bootstrap 模式并使用它通过 CodeMirror 和 CodeMirrorUI 进行编辑。当我从 jQuery .ajax 调用中收到错误消息时，我调用了 BootstrapDialog.alert。当我成功时，我调用 BootstrapDialog.show。这两个都可以在下面看到。

当显示 Bootstrap 对话框时，两者都不会出现。为什么这(不会)发生？

<div class="modal fade" id="codeEditorModal" tabindex="-1" role="dialog" aria-labelledby="codeEditorModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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="myModalLabel">Create/Edit Script</h4>
            </div>
            <div class="modal-body">
                <select class="selectpicker" name="idLanguage" id="selectLanguage" onchange="selectMode()" data-style="btn-primary btn-sm">
                    <option value="text/x-csharp">C#</option>
                    <option value="application/xquery">XQuery</option>
                    <option value="text/html">HTML/XML</option>
                    <option value="application/json">JSON</option>
                    <option value="text/x-sql">SQL</option>
                    <option value="text/javascript">JavaScript</option>
                </select>
                <br />
                <textarea class="textareawidth form-control" id="code-textarea" rows="10" cols="120"></textarea>
                <br />
                <textarea class="textareawidth form-control" id="message-textarea" rows="5" cols="220"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" id="compileCodeEditorContents" class="btn btn-primary btn-sm">Compile</button>
                <button type="button" id="saveCodeEditorContents" class="btn btn-primary btn-sm">Save changes</button>
                <button type="button" id="showCode" class="btn btn-primary btn-sm">Show Code</button>
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
            </div>
            <div id="divAjaxResult"></div>
        </div>
    </div>
</div>

JavaScript:

<script type="text/javascript">
    var editor = null;
    var editorMessages = null;
    var editorText = "";
    var ruleLanguage = "";
    var idObject = ""
    var bCompile = false;

    function saveCodeEditorContents() {
        var scriptContents = editor.mirror.getValue();

        var codeEditorModel = {
            "ID": $("#ID").val(),
            "ScriptContents": scriptContents,
            "ScriptLanguage": $("#selectLanguage").val(),
            "Compile": bCompile
        };

        jsonString = JSON.stringify(codeEditorModel);

        $.ajax({
            url: '@Url.Action("SaveModel", "EAMetaDataItemControlAttribute")',
            type: "POST",
            dataType: "json",
            data: jsonString,
            contentType: "application/json; charset=utf-8",
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR + "-" + textStatus + "-" + errorThrown);
            },
            success: function (result) {
                var strMessage = result.output;
                var nPos = strMessage.indexOf("error");
                if (nPos >= 0) {
                    bootbox.confirm("Are you sure?", function (result) {
                        alert('You clicked: ' + result);
                    });
                    BootstrapDialog.alert({
                        title: 'Error',
                        message: strMessage,
                        type: BootstrapDialog.TYPE_DANGER, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
                        closable: true, // <-- Default value is true
                        buttonLabel: 'Close', // <-- Default value is 'OK',
                        callback: function (userAction) {
                            // result will be true if button was click, while it will be false if users close the dialog directly.
                            strUserAction = 'Result is: ' + userAction;
                        }
                    });
                }
                else if (codeEditorModel.Compile == true) {
                    bootbox.confirm("Are you sure?", function (result) {
                        alert('You clicked: ' + result);
                    });
                    BootstrapDialog.show({
                        message: 'Compilation was successful.',
                        buttons: [{
                            label: 'Close',
                            action: function (dialogItself) {
                                dialogItself.close();
                            }
                        }]
                    });
                }
                //$('#divAjaxResult').html('<div class="success">' + message + '</div>');
            }
        });

        bCompile = false; // for next time this function is used just to save
    }

Answer 1

在bootstrap docs据说

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

我使用 BootBox允许多个模态对话框。