dynamic iframe in ui.dialog
I'm trying to dynamically create an iframe in my dialog and I have it working but not really because I only works sometimes here is the code
function test(obj){
if($('#wa').length === 0){ // check if we have already created iframe and dialog
$('body').append('<div id="wa"></div>'); //add a div for the the iframe to go into
$("#wa").dialog({ //apply a ui dialog
autoOpen: false,
bgiframe: false,
modal: true,
autoResize: true,
buttons: {
Submit: function() {
$('#iframe').contents().find('#f').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
}
$('#iframe').remove();
var $frame = $('<iframe id="iframe" width="100%" height="325"></iframe>');
$('#wa').append($frame); // add iframe to created div
var tm2 = setTimeout( function() {//apply content to iframe
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
'<html xmlns="http://www.w3.org/1999/xhtml">'+
'<head>'+
'<title>test iframe</title>'+
'<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
'<meta http-equiv="Content-Language" content="en-us" />'+
'<form name="f" id="f" action="https://example.com" enctype="application/x-www-form-urlencoded" method="post">'+
'<fieldset>'+
'<label>test1:</label>'+
'<input type="text" name="test1" value="" size="15" class="required"/>'+
'<label>test2:</label>'+
'<input type="text" name="test2" value="" size="15" autocomplete="off" class="required" />'+
'<input type="submit" value="Login" />'+
'</fieldset>'+
'</form></body></html>');
}, 1 );
$("#wa").dialog('open');//open the dialog
}
$('body').append('<input type="button" id="test" value="test" />');
$('#test').click(functi开发者_StackOverflowon(){
test();
});
There is a Frame Dialog Plug-in available... http://plugins.jquery.com/project/jquery-framedialog
加载中,请稍侯......
精彩评论