Can I use jquery deferreds to sequentially show jquery ui dialogs - dialog

Question

I am trying to use JQuery UI Dialog with JQuery deferreds to sequentially show two dialogs. However, it seems that the dialog code is executed immediately for the first dialog and then the second dialog appears.
I have this JSFiddle snippet:
http://jsfiddle.net/clee/db5SX/179/
Is what I'm attempting to do not feasible since the invocation of the dialog is synchronous?
code here:
var deferred = new $.Deferred();
function step1() {
var d1 = new $.Deferred();
var options = {
modal: true,
width: 400,
title: "dialog 1",
buttons: [
{
'text':'ok',
'click': function () {
console.log('ok');
d1.resolve(true);
$(this).dialog('close');
}
},
{
'text':'cancel',
'click': function () {
console.log('cancel');
d1.reject();
$(this).dialog('close');
}
}
]
};
$("#dialog").dialog(options);
return d1.promise();
}
function step2() {
var d1 = new $.Deferred();
var options = {
modal: true,
width: 400,
title: "dialog 2",
buttons: [
{
'text':'ok',
'click': function () {
console.log('ok');
d1.resolve(true);
$(this).dialog('close');
}
},
{
'text':'cancel',
'click': function () {
console.log('cancel');
d1.reject();
$(this).dialog('close');
}
}
]
};
$("#dialog").dialog(options);
return d1.promise();
}
deferred.then(function(){step1();}).then(function(){step2();});
var deferred = new $.Deferred();
function step1() {
var d1 = new $.Deferred();
var options = {
modal: true,
width: 400,
title: "dialog 1",
buttons: [
{
'text':'ok',
'click': function () {
console.log('ok');
d1.resolve(true);
$(this).dialog('close');
}
},
{
'text':'cancel',
'click': function () {
console.log('cancel');
d1.reject();
$(this).dialog('close');
}
}
]
};
$("#dialog").dialog(options);
return d1.promise();
}
function step2() {
var d1 = new $.Deferred();
var options = {
modal: true,
width: 400,
title: "dialog 2",
buttons: [
{
'text':'ok',
'click': function () {
console.log('ok');
d1.resolve(true);
$(this).dialog('close');
}
},
{
'text':'cancel',
'click': function () {
console.log('cancel');
d1.reject();
$(this).dialog('close');
}
}
]
};
$("#dialog").dialog(options);
return d1.promise();
}
deferred.then(function(){step1();}).then(function(){step2();});
deferred.resolve();