响应Durandal对话框

问题描述

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

I'm using Durandal in my new application and I have an issue with Durandal's dialog window (I'm using it to get some data from users).

当我手动设置窗口宽度时，（默认情况下，Durandal设置窗口位置从JavaScript），如果我想有窗口宽度600px，我需要通过CSS与 .dialog {width：600px！重要} 。这是所有问题开始的地方。

When I set width of window manually, (by default Durandal set window position from JavaScript) and if I want to have window width 600px , I need to do that through CSS with .dialog { width: 600px! important}. and that's where all the problems starts.

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

On window resize, dialog is not responsive anymore, and when I have big form in it and window height is small, for example on laptops I cant see a half of my form and I don't get any scroll.

在移动设备上，这是一个混乱。

On mobile devices it's a total mess. Does anyone knows how to make this thing work?

推荐答案

我相信Durandal模态是在Durandal 2.1接受爱，知道它是否会响应。

I believe the Durandal modal is receiving love in Durandal 2.1 although I do not know if it will be responsive.

同时，Durandal提供了你需要实现自己的模态功能的所有钩子 - 包括定义不同类型的模态对话框。您可以在这里阅读更多相关资讯：

In the meanwhile, Durandal provides all the hooks you need to implement your own modal functionality - including the ability to define different types of modal dialogs. You can read more about it here:

我简单地试过这通过一些在google群组中找到的代码，并能够获得引导3模式工作。

I experimented briefly with this via some code found on google groups and was able to get bootstrap 3 modals working.

欢迎您试用它，看看它是否适合您。注意，您必须使用bootstrap 3才能正常工作（durandal 2.0 starterkit等自带bootstrap 2）

You're welcome to try it out and see if it works for you. Note that you must be using bootstrap 3 for this to work (durandal 2.0 starterkit etc comes with bootstrap 2)

在dialog.js中， return dialog;

In dialog.js, just before 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
});

，然后用以下方式激活：

and then activate with:

code> dialog.show（viweModel，null，'bootstrap'）

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

或者我相信这将工作， t test it：

or I believe this would work also but I didn't test it:

dialog.showBootstrap（viewModel）

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

And your view should follow the markup pattern:

<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>

这里是我得到代码的提示：

Here is the gist where I got the code:https://gist.github.com/webm0nk3y/7603042

和相关的google群组主题：

And the relevant google groups thread:https://groups.google.com/forum/#!topic/durandaljs/8g7DDCuvlpU

这篇关于响应Durandal对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！