artDialog 弹出框插件,或者说是弹出对话框插件,需要对弹出后的对话框操作?artDialog的控制接口就是用来干这些事情的,这在异步消息操作中非常有用。 artDialog功能特性: 自适应内容、强大的接口配置参数、细致的体验、预先缓存皮肤图片更快响应、跨平台兼容兼容:IE6+、Firefox、Chrome、Safari、 Opera。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景等,而且在artDialog弹出框插件 中,框架应用扩展将完全被简化。
最近项目中有使用到artDialog,遇到一些问题:
1:弹窗open一个新页面,在点击弹窗的确定按钮时保存数据并关闭该弹出框并刷新父页面。
下面有个例子,转载于zhangwu
打开编辑页面代码,确定事件调用了页面上隐藏的btnsave按钮。 art.dialog.open(url, { id: 'pg123', title: strtitle, lock: false, width: wid, height: hei, ok: function () { var iframe = this.iframe.contentWindow; iframe.document.getElementById("btnsave").click(); return false; }, cancel: true }); 保存后调用 function showtip2(str) { art.dialog.tips(str, 1.5); setTimeout('originreload()', 1000); } function originreload() { var win = art.dialog.open.origin;//来源页面 win.location.reload(); } 刷新父窗体,自动关闭弹出窗体。
以上代码我使用后还是有问题,在保存时调用方法sumitModelForm(),在其后调用showtip2("操作成功!");后,数据保存了,但是窗口未关闭。
function sumitModelForm(){ if($("#modelForm").valid()){ $("#modelForm").submit(); } }
经过检查+不断测试,发现ajaxForm可以完善该功能。我之前是直接form.submit()的。
修改代码如下:
1)在弹窗新开页面引入jquery.form.js 以及 artDialog库;
2)后台操作后使用response.getWrite().print("success")来表示操作成功等;
3)父页面弹窗代码
var alt=null; function openAddUser(operId){ alt = art.dialog.open("openSavePage.do?operId="+operId, { id:'evaluate'+operId, title: '新增用户', width :500, height:320, lock : true, opacity : 0.4, init: function () { }, button :[ { name : '确定', callback : function(){ var iframe = this.iframe.contentWindow; if (!iframe.document.body) { return false; }; iframe.sumitModelForm(); return false; }, focus : true },{ name : '取消', callback : function(){ this.close(); } } ], cancel: true }); }
4)子页面代码
$(document).ready(function(){ $("#modelForm").validate({ errorClass:"text-error" }); var options = { success: function(data) { if(data=="success"){ showTip("操作成功","succeed"); }else{ showTip("操作失败","warning"); } }}; $('#modelForm').ajaxForm(options); }); //提交form function sumitModelForm(){ $('#modelForm').submit(); } //消息提示 function showTip(mess,icon) { art.dialog.through({ id : 'Tip', title : '消息', fixed : true, lock : true, opacity: .2, content : mess, icon : icon, time : 1 }); setTimeout('originReload()', 1000); } //重载来源页面 function originReload(){ var win = art.dialog.open.origin; win.location.reload(); }
<form id="modelForm" method="post" action="save.do"> ...编辑域... </form>
以上代码,通过artdialog弹出form表单,并通过ajaxform来提交的js(表单可以采用jquery validate验证控件来验证表单),达到了我想要的效果。虽然比较曲折,对js还是得加强学习。
如果不想重装源页面,只想关闭dialog而已。
则使用一下方法closeAllDialog()替换掉之前的originReload()方法即可:
//关闭源页面上的所有dialog function closeAllDialog(id) { //获得弹出窗口的源页面 var win = art.dialog.open.origin; var list = win.art.dialog.list; for (var i in list) { list[i].close(); }; }
相关推荐
弹出一个窗口关闭后刷新父页面,自己试过可以,不知道是不是你们要的效果
这个可以自定义的 可以弹出层关闭 父页面刷新 ,可以弹出层不关闭 父页面刷新
子页面刷新父页面
artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。
用iframe、弹出子页面刷新父页面 iframe parent.location.reload(); 弹出子页面 window.opener.location.reload(); 子窗口刷新父窗口 self.window.opener.locaction.reload(); 刷新一open()方法打开的窗口 ...
open 关闭子页面刷新父页面
网上找了好几个小时没有找到解决办法。最终还是自己解决了。...这样做就是用超链接把返回url转递到用showModalDialog打开的新窗口中,当showModalDialog返回时指到转来的url,最终不刷新父窗口。......
父页面弹出子页面
iframe弹出框遮罩父类页面,进去之后直接打开demo里面的layout.html 页面看效果,然后查看代码;才方法不需要将子类的js 及弹出框的代码写在父类里面,依旧是写在子类页面里面
// 刷新父页面。此段代码放在被弹出的页面 function refreshOpener() { var win = top.window; try { if (win.opener) win.opener.location.reload();//或parent.location.reload(); } catch (ex) { } } .......
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值,详情链接:
在A页面店家摊主B页面 选择B页面的东西 返回A页面一个值
JS关于刷新父页面例子:javascript 弹出页面点击确定,刷新父页面 仔细分析学习
ArtDialog 仿Vista风格的javascript对话框组件,具有超高的兼容性,对IE、火狐、Google浏览器兼容都不错,而且设计精美,弹出框的功能也很多:比如弹出图片、弹出动画、右下角消息、询问框、警告、弹出菜单、调用...
支持弹出层 把页面以层的方式弹出 跨框架 兼容性好,而且文档是中文的
对入做网站的一般都有好去,点击按钮,屏蔽网页,弹出窗体,现在一般网页都有这个效果
JS弹出层同事弹出新页面,点击按钮弹出一下层并且同事弹出一个新的网页。
在同一个父页面中的两个iframe里面的两个子页面,进行无刷新的更新!
js弹出页面窗口和关闭. js弹出页面窗口和关闭.
extjs弹出框 n秒后消失 信息可以自定义 时间可以自己定 extjs弹出框 n秒后消失 信息可以自定义 时间可以自己定