javascript - 响应式 Durandal 对话框

Question

我在我的新应用程序中使用 Durandal，但我遇到了 Durandal 对话框窗口的问题(我正在使用它从用户那里获取一些数据)。

当我手动设置窗口宽度时(默认情况下，Durandal 通过 JavaScript 设置窗口位置)并且如果我想要窗口宽度为 600px，我需要通过 CSS 使用 .dialog { width: 600px!重要的。这就是所有问题的开始。

在调整窗口大小时，对话框不再响应，并且当我在其中有大表单并且窗口高度很小时，例如在笔记本电脑上我看不到表单的一半并且没有任何滚动条。

在移动设备上，它完全是一团糟。有谁知道如何使这个东西工作？

Answer 1

我相信 Durandal 模态在 Durandal 2.1 中受到喜爱，尽管我不知道它是否会响应。

与此同时，Durandal 提供了实现您自己的模态功能所需的所有 Hook - 包括定义不同类型的模态对话框的能力。您可以在这里阅读更多相关信息:

http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html

我通过在 google groups 上找到的一些代码对此进行了简短的实验，并且能够使 bootstrap 3 modals 正常工作。

欢迎您尝试一下，看看它是否适合您。请注意，您必须使用 bootstrap 3 才能正常工作(durandal 2.0 starterkit 等带有 bootstrap 2)

在 dialog.js 中，就在 return dialog;

之前

dialog.addContext('bootstrap', {
    addHost: function (theDialog) {
        var body = $('body');
        $('<div class="modal fade" id="myModal"></div>').appendTo(body);
        theDialog.host = $('#myModal').get(0);
    },
    removeHost: function (theDialog) {
        setTimeout(function () {
            $('#myModal').modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }, 200);

    },
    compositionComplete: function (child, parent, context) {
        var theDialog = dialog.getDialog(context.model);
        $('#myModal').modal('show');
    },
    attached: null
});

然后激活:

dialog.show(viweModel, null, 'bootstrap')

或者我相信这也可以，但我没有测试过:

dialog.showBootstrap(viewModel)

并且您的 View 应遵循标记模式:

<div class="messageBox">
    <div class="modal-header">
        Header Markup
    </div>
    <div class="modal-body">
        Body Markup
    </div>
    <div class="modal-footer">
        Footer Markup
     </div>
</div>

这是我得到代码的要点: https://gist.github.com/webm0nk3y/7603042

以及相关的谷歌群组主题: https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU