Last active
January 12, 2018 13:39
-
-
Save johndobrien/7603042 to your computer and use it in GitHub Desktop.
A Durandal 2 DialogContext which works with Bootstrap 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(...); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great it worked!!! Thanks a lot.