Q:

jQuery UI dialog - dynamic div - function sequence issue

I've got a div that I am appending to the page dynamically on click of a link, and then writing an iframe to that div. 
// open login popin
function loginLayer(){
    $(".ui-dialog-content").dialog("destroy");
    callIframe();
    openLoginDialog();
}

// write dialog div & iframe + src to DOM
function callIframe() {

    var iframeURL = "" + loginConfig.iframeSource + "?displayType=" + loginConfig.displayType +"&isSignature=" + loginConfig.isSignature + ""
    $('body').append('<div id="loginDialog"></div>');
    $('#loginDialog').append('<IFRAME id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></div>');
}

// open login dialog
function openLoginDialog(){ //open }

after callIframe runs, the dialog opens. 
What's happening is that the dialog opens with the iframe, no issue - but, at the bottom of the body (firefox and IE) is a large amount of white space that is the same size as the #loginDialog height. 
I'm not sure the cause, as everything appears in order - but it appears that when the div is appended to the body, that it's rendering there - increasing body height and then opening in the dialog.
Edit
Appears that it's a timing issue - if I step through each action using breakpoints, the problem is resolved - so something is triggering too soon...
If I do this, it works - so something in callIframe?:
callIframe();
alert('works when interrupted by alert');
openLoginDialog();

then, there's no issue. So, that means

A:

It could be written in cleaner way and I think it's the url that making the problem
function callIframe()
{
    $(".ui-dialog-content").dialog("destroy");
    var iframeURL = loginConfig.iframeSource + "?displayType=" + loginConfig.displayType + "&isSignature=" + loginConfig.isSignature;​
    var iframe=$('<iframe></iframe>', {
        src:iframeURL,
        id:'loginLayer',
        name:'loginLayer',
        width:'100%',
        marginheight:0,
        marginwidth:0,
        frameborder:0
    });
    $('<div id="loginDialog"></div>').html(iframe).dialog();
}

callIframe();

An Example Demo.
Update: According to your need here is an updated fiddle.

