很多时候,我们需要在页面上弹出一些窗口供用户操作或者是一些提示信息。当然了,弹出一个表单也是有这样的需求的。那么问题就来了。当这个表单提交之后,我们需要关闭这个弹窗啊。按照我们对程序执行的顺序,我们很容易想到在submit()函数调用后再加上一句关闭的语句。但是,你会发现加上之后确实能关闭,但是表单根本不会提交。好吧,这个时候你就开始不知道怎么办了,开始各种百度”submit()执行之后执行js、submit()执行之后关闭窗口。。。。“,好吧,我承认这是我遇到这个问题之后干的事。
对于网上各种答案,各种解决方法。比如设置settimeOut什么的,window.openr.close()等等,我也试过。或许是没用对,反正没能解决我的问题。那么我的问题是怎么解决的呢?
**先讲讲我的需求:在页面上点击一个按钮,随即弹出一个表单。点击保存按钮就提交表单,提交之后提示保存状态。并且关闭弹窗。
好了,废话不多说。讲讲我的解决方法。当然了,我这个是有特殊性的。毕竟标题都加了layer弹窗。没错,我是使用了jquery的弹层插件layer。所以只针对使用layer进行弹窗的有效哟!**
查阅layer帮助文档,很容易就可以找到layer为我们提供的关闭弹窗的方法:layer.close(index)。好吧,于是我们就调用这个方法呗。于是,我又在submit()方法之后,调用layer.close();发现结果一样,弹窗直接关闭了,但是表单并没有提交。问题依然存在。
就在我快要崩溃的时候,发现就在layer.close(index)方法下面还有另外一个方法,layer.closeAll().下面是官方给出的方法:
layer.closeAll();
layer.closeAll('dialog');
layer.closeAll('page');
layer.closeAll('iframe');
layer.closeAll('loading');
layer.closeAll('tips');
看到第一条就兴奋了,我草,疯狂模式,关闭所有层。ok,有希望了。于是马上试了一下,泪崩啊!!!终于能既提交表单又关闭窗口了。
这里说一下哈,js里边代码的执行顺序并不一定是按照代码的顺序执行的。所以呢,你还是不能直接在按钮的点击事件里执行submit()之后执行关闭操作。我会在最后附上一小段代码展示如何使用。
ok,能实现基本功能了。最后就再完美一点。我们一般情况下,在数据保存之后要给出一个提示,告诉用户保存状态。这个时候如果你还使用layer.closeAll().都疯狂了,肯定最后弹出的那个也直接被关掉了。解决方法就是,后边还提供了几个带参数的closeAll(arg)。比如弹出的是一个iframe,你只需要调用layer.closeAll('iframe');就行了,其它的弹层并不会关闭。这个时候保存成功了,就能正常弹出提示信息了。
最后是一个使用实例:比如是点击一个按钮触发事件
function save(){
$.ajax({
type:"post",
url:"",
data: body.find('form').serialize(),
success:function(d){
if(d=="success"){
layer.msg('保存成功!');
}
if(d=="error"){
layer.msg('保存异常!');
}
layer.closeAll('iframe');
}
});