From Durandal's HTML Samples download.

index.html

<section>
    <h2>Click the button below to show a custom modal.</h2>
    <button class="btn btn-default" data-bind="click:showCustomModal">Show Custom Modal</button>
</section>

index.js

define(['durandal/app', './customModal'], function (app, CustomModal) {
    return {
        showCustomModal: function() {
            CustomModal.show().then(function(response) {
                app.showMessage('You answered "' + response + '".');
            });
        }
    };
});

customModal.html

<div class="modal-content">
    <div class="modal-header">
        <h3>Color</h3>
    </div>
    <div class="modal-body">
        <form data-bind="submit: ok">
            <p class="message">What is your favorite color?</p>
            <input data-bind="value: input, valueUpdate: 'afterkeydown'" class="form-control autofocus"/>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-bind="click: ok">Ok</button>
    </div>
</div>

customModal.js

define(['plugins/dialog', 'knockout'], function (dialog, ko) {
    var CustomModal = function() {
        this.input = ko.observable('');
    };
 
    CustomModal.prototype.ok = function() {
        dialog.close(this, this.input());
    };
 
    CustomModal.prototype.canDeactivate = function () {
        return dialog.showMessage('Are you sure that\'s your favorite color?', 'Just Checking...', ['Yes', 'No']);
    };
 
    CustomModal.show = function(){
        return dialog.show(new CustomModal());
    };
 
    return CustomModal;
});