css - Durandal 2.0.1 中的 bootstrap 3 模态

Question

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

Answer 1

How to convert from a 2.x to 3.0 modal

• remove .hide from the .modal (it's now hidden by default) wrap
• .modal-header .modal-body .modal-footer inside .modal-content wrap
• .modal-content inside .modal-dialog

您需要覆盖 dialog.js 中的标记，主要是，我认为第二个元素符号是您需要担心的。从第 82 行开始，您应该用一个 .modal-content div 将三个 div 包裹在 .messageBox 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