jquery UI diloag
官网地址:http://api.jqueryui.com/dialog/#option-hide
1.简单的采用div加载
<div id="dialog">
<form id="dialogForm" method="post" action="user/add">
<table>
<tr>
<td>名字:</td>
<td>
<input type="text" name="name"/>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="text" name="age"/>
</td>
</tr>
</table>
</form>
</div>
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons:{
"确定":function(){
var form = $("#dialogForm");
$.ajax({
url:form.attr('action'),
type:form.attr('method'),
data:form.serialize(),
dataType:"json",
success:function(data){
$("#dialog").dialog("close");
alert("成功啦");
},
error:function(){
$("#dialog").dialog("close");
alert("出错了哦");
}
}
},
"关闭": function() {
$("#dialog").dialog("close");
}
}
});
2.jquery diloag采用动态URL的方式,需要使用iframe
eg:
var html =
'<div style="width:800px;height:600px;" id="dialogtest" title="Item Query">' +
' <iframe id="iframe" src="/app/fditemmaster/entryFdQuery" frameborder="0" style="border:0;" scrolling="no" width="100%" height="100%"></iframe>' +
'</div>';
$(html).dialog({
bgiframe: true,
resizable: true,
width :800,
height:600,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
close:function()
{
//彻底删除div标签
$(this).remove();
}
});
a.父窗口调用iframe中的方法
window.frames["iframe1"].contentWindow.test();
b.iframe中调用父窗口中的方法
window.parent.closeDialog();
c.iframe中查找父窗口中的元素
$("body", parent.document).find('#itemId_autocomplete').attr("value",
data);
d.父窗口中查找子窗口元素
$('iframe').contents().find('.c_div').html();
3.相关网站链接
http://www.cnblogs.com/mybest/archive/2011/12/02/2271940.html