Responsive Durandal dialog

Question

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

Answer 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');
        $('
').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:

    

        Header Markup
    
    

        Body Markup
    
    

        Footer Markup
     

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