响应式 Durandal 对话框答案

【问题标题】：Responsive Durandal dialog响应式 Durandal 对话框
【发布时间】：2013-12-26 22:33:11
【问题描述】：

我在我的新应用程序中使用 Durandal，但 Durandal 的对话窗口存在问题（我正在使用它从用户那里获取一些数据）。

当我手动设置窗口宽度时（默认情况下，Durandal 从 JavaScript 设置窗口位置）如果我想要窗口宽度为 600px，我需要通过 CSS 使用 .dialog { width: 600px! important} 来实现。这就是所有问题的开始。

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

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

【问题讨论】：

标签： javascript html css durandal

【解决方案1】：

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

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

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

我通过在 google 群组上找到的一些代码对此进行了简短的试验，并且能够让 bootstrap 3 模态正常工作。

欢迎您尝试一下，看看它是否适合您。请注意，您必须使用 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)

你的视图应该遵循标记模式：

<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

以及相关的 google 群组线程： https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU

【讨论】：

【解决方案2】：

如果你想禁用自定义模式的宽度设置，你可以在最外层的 div 中添加以下样式定义：

<div style="width:auto;">

请注意，这可能会导致某些浏览器出现奇怪的行为。

如果您对 MessageBox 或 Modals 有其他要求，尤其是它们的定位和大小，请告诉我，我可以对代码进行一些更改。我的电子邮件是 tommi.gustafsson atloyalistic.com。

2014 年 1 月 14 日更新：

我对 dialog.js 进行了新修订，它有助于解决自定义 MessageBox（不是自定义模式）的问题。您可以在以下位置找到它：

https://github.com/TommiGustafsson/Durandal/blob/master/src/plugins/js/dialog.js

（这仍然是非官方的，因为它在我的 Durandal 分支中。）

您可以在此处找到如何使用它的说明：

https://github.com/BlueSpire/Durandal/pull/362#issuecomment-32180718

如果您在使用 MessageBox 时遇到问题，我认为这可能会对您有所帮助。

【讨论】：