A Durandal 2 DialogContext which works with Bootstrap 3

gistfile1.js

// this is based on the documentation http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals/
// create a dialog context: dialogContext.js
define(['jquery', 'knockout', 'transitions/entrance', 'plugins/dialog', 'bootstrap'],
    // Create a dialog using Bootstrap 3
    function($, ko, entrance, dialog) {
        return {
            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');
            }
        };
    });
    
// in the main.js where you call app.start...
define([... 'dialogContext'], function (...., dialogContext) {
    ...
    app.start().then(function () {
        ...
        // The name can be anything you choose (See Note at end of DialogContext)
        dialog.addContext("MyDialog", dialogContext);
        ...
    });
    ...
});

// to show your dialog in a view
define(['plugins/dialog'], function (dialog) {
    
    return {
        // use the function generated for your registered context
        dialog.showMyDialog(...);
    }
});

Great it worked!!! Thanks a lot.