首先,引用layer,自行下载。

添加如下两行

<script src=" ../layer/jquery.min.js"></script>

<script src=" ../layer/layer.js"></script>

layer.open({
type: 2,
skin: 'layui-layer-lan',
title: '标题',
fix: false,
shadeClose: true,
maxmin: true,
area: ['800px', '400px'],
content: 'Default.aspx',
//end: function () { //关闭弹出层触发
// location.reload(); //刷新父界面,可改为其他
//} });

在弹出层中,如何点击提交或者保存时,自动关闭弹出层,刷新父界面?下面来为大家解答。

假设有两个界面,分别为Default.aspx和Default2.aspx。

在Default.aspx中设置一个Button控件,并隐藏,如下:

<asp:Button ID="Button1" runat="server" Text="刷新" OnClick="Button1_Click"  style="display:none" />

控件Button1的事件内容可以是用来保存临时数据,防止用户填写时,未保存,刷新界面导致数据丢失。

接下来是javascript调用该控件。

<script>
function ShowData()
{
document.getElementById("Button1").click();
var index = parent.layer.getFrameIndex('Default2.aspx');
parent.layer.close(index);
}
</script>

在弹出层的提交或者保存按钮事件中添加如下代码:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "JsFun", "<script type=\"text/javascript\">alert('提交成功!');parent.ShowData();</script>", false);

即可实现,用户点击提交或者保存时,弹出提示框,自动关闭弹出层,并刷新父界面。

JavaScript实现弹出层(以layer.open为例)的更多相关文章

  1. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  2. 使用JavaScript实现弹出层效果

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...

  3. javascript网页弹出层练习

    网页中经常出现很多"popup"弹窗效果,这里做一个练习,给我们初学者一个参考. HTML代码: <div id="popup"></div& ...

  4. 使用JavaScript实现弹出层效果的简单实例

    转自:https://www.jb51.net/article/85475.htm 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 ...

  5. Layui 弹出层组件——layer

    layer是作为Layui[经典模块化前端框架]的一个弹层模块,由于其用户基数较大,所以把layer作为独立组件来维护. 基础参数: 基础参数主要指调用方法时用到的配置项,如:layer.open({ ...

  6. javascript对话框(弹出层)组件

    http://www.blueidea.com/download/product/2010/7513.asp#comment 1. 从头到尾对一遍<<Javascript高级程序设计> ...

  7. 弹出层框架layer快速使用

    layer官方及演示文档:layer官方及演示文档 1.将layer整个放入工程内. 2.文件内引入layer.js, <script type="text/javascript&qu ...

  8. 前端弹出层框架layer

    http://www.layui.com/doc/modules/layer.html#layer.confirm

  9. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

随机推荐

  1. 使用CURL模拟表单上传文件

    //以下代码适合PHP7.x PHP5.6$file = new CURLFile('./127.zip','application/octet-stream');$file->setMimeT ...

  2. 易语言中锐浪报表绿色发布指南(免COM组件DLL注册)

    第一步 打开易语言开发环境(注要求易语言版本 v5.5及以上版本,如果版本太低,请更新到新版本),点击[工具]菜单,进入系统配置界面: 第二步 切换选择夹到[存根]项目,选中"使用用户自定义 ...

  3. android6.0系统Healthd分析及低电量自动关机流程

    系统平台:android6.0概述Healthd是android4.4之后提出来的一种中介模型,该模型向下监听来自底层的电池事件,向上传递电池数据信息给Framework层的BatteryServic ...

  4. flex“深拷贝”

    以前在<ActionScript殿堂之路>上就看到过的“深拷贝”概念一直没有好好地在实战中用到过,但是最近在开发过程中,我发现我在编写VO数据对象时的一个老习惯很浪费我的编码时间,这个习惯 ...

  5. 使用Nginx+uWSGI+Django方法部署Django程序

    第一步先解决uwsgi与django的桥接.解决在没有nginx的情况下,如何使用uwsgi+DJANGO来实现一个简单的WEB服务器. 第二步解决uwsgi与Nginx的桥接.通过nginx与uws ...

  6. 07- django组件:中间件

    1.中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影 ...

  7. SSIS 数据流优化

    一,数据流设计优化 数据流有两个特性:流和在内存缓冲区中处理数据,根据数据流的这两个特性,对数据流进行优化. 1,流,同时对数据进行提取,转换和加载操作 流,就是在source提取数据时,转换组件处理 ...

  8. svn检出项目后,serverlet包 报错

    因为缺少一个包    servlet-api.jar   没引.

  9. 遗留系统:IT攻城狮永远的痛

    我常常觉得我们非常幸运,我们现在所处的时代是一个令人振奋的时代,我们进入了软件工业时代.在这个时代里,我们进行软件开发已经不再是一个一个的小作坊,我们在进行着集团化的大规模开发.我们开发的软件不再是为 ...

  10. Ubuntu安装Oh My Zsh

    1. 安装ZSH sudo apt-get install zsh 安装完后需要注销或重启才能生效.注销或重启后打开终端,会出现ZSH的界面,选择(2) 2. 安装Oh My Zsh sh -c &q ...