Durandal 2.0.1 中的 bootstrap 3 模态答案

【问题标题】：bootstrap 3 modal in Durandal 2.0.1Durandal 2.0.1 中的 bootstrap 3 模态
【发布时间】：2013-12-29 05:17:13
【问题描述】：

我正在使用 Durandal 2.0.1 和 Bootstrap 3。问题：模态对话框无法正确呈现。它失去了css-es。我想我需要重写 durandal 插件文件夹中的 dialog.js。但是，如果有人已经这样做了，或者知道更简单的方法来实现这一点，那就太好了。

【问题讨论】：

标签： css twitter-bootstrap knockout.js twitter-bootstrap-3 durandal

【解决方案1】：

如何从 2.x 模式转换为 3.0 模式

从 .modal 中移除 .hide（它现在默认隐藏）包装

.modal-header .modal-body .modal-footer inside .modal-content wrap

.modal-content 位于 .modal-dialog 中

您需要覆盖 dialog.js 中的标记，主要是，我认为第二个项目符号是您需要担心的。从第 82 行开始，您应该在 .messageBox div 中用一个 .modal-content div 包装三个 div。没有测试过。如果这有效，请发布。

MessageBox.defaultViewMarkup = [
        '<div data-view="plugins/messageBox" class="messageBox">',
            '<div class="modal-content">',
                '<div class="modal-header">',
                    '<h3 data-bind="text: title"></h3>',
                '</div>',
                '<div class="modal-body">',
                    '<p class="message" data-bind="text: message"></p>',
                '</div>',
                '<div class="modal-footer" data-bind="foreach: options">',
                    '<button class="btn" data-bind="click: function () { $parent.selectOption($data); }, text: $data, css: { \'btn-primary\': $index() == 0, autofocus: $index() == 0 }"></button>',
                '</div>',
             '</div>',
        '</div>'
    ].join('\n');

升级时需要更详细的更改，check here

【讨论】：

【解决方案2】：

通过覆盖 Durandal CSS，我能够让 Durandal 模态与 Bootstrap 3 一起正常工作：

.modalHost { opacity: 1 !important; }
.messageBox { visibility: visible !important; }

【讨论】：