Durandal Modal Example
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; });