Question

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

Answer 1

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.