响应Durandal对话框 [英] Responsive Durandal dialog

查看:163
本文介绍了响应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:

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

我简单地试过这通过一些在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>

这里是我得到代码的提示:
https://gist.github.com/webm0nk3y/7603042

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

和相关的google群组主题:
https://groups.google。 com / forum /#!topic / durandaljs / 8g7DDCuvlpU

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆