Question

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

Answer 1

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


从.modal中删除.hide（现在默认隐藏）。

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

.modal-content inside .modal-dialog

你需要覆盖dialog.js中的标记，主要是，我认为第二个子弹是你需要担心的。从第82行开始，你应该在.messageBox div中包含三个div，其中包含一个.modal-content 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

Answer 2

通过覆盖Durandal CSS，我能够通过Bootstrap 3正确地运行Durandal模式：

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

Durandal 2.0.1中的bootstrap 3模态

2 个答案: