Responsive Durandal dialog

问题

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

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?

回答1:

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

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

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

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)

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:

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

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

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

回答2:

If you want to disable the width-setting for custom modals, you can add the following style definition to your outermost div:

<div style="width:auto;">

Please note that this can cause strange behaviour in some browsers.

If there is something else you would like to have for MessageBoxes or Modals, especially for their positioning and sizing, please let me know and I can make some changes to the code. My email is tommi.gustafsson at loyalistic.com.

UPDATE 14 Jan 2014:

I made a new revision of dialog.js, which helps with problems with customizing the MessageBox (not custom modals). You can find it at:

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

(That's still unofficial, since it's in my fork of Durandal.)

You can find the instructions how to use it here:

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

If you have problems with MessageBox, I think this might help you.

来源：https://stackoverflow.com/questions/20792129/responsive-durandal-dialog

标签

javascript