首先,引用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. K2 4.7 升级 数据库排序规则更改

    介绍 在过去,K2没有指定安装过程中要在其数据库上使用的标准排序规则.然而,现在K2引入了标准排序规则,以便在之后使用(如果我没有错的话,它是在4.7). 因此, 问题出现在数据库的排序规则不是Lat ...

  2. UNIX网络编程 卷2 源代码使用

    1. 下载源码,W. Richard Stevens的主页:http://www.kohala.com/start/ wget http://www.kohala.com/start/unpv22e/ ...

  3. iOS 计算源码行数

    如果要统计ios开发代码,包括头文件的,终端命令进入项目目录下,命令如下 1.列出每个文件的行数 find . -name "*.m" -or -name "*.h&qu ...

  4. POJ 1235 Machine Schedule 【二分图】

    这道题考察对最小点覆盖的理解. 做法: 对于一个作业,它需要A的a模式和B的b模式,那么可以从a模式向b模式连一条边:可以感性的理解为每一条边就是一个作业,需要求得有多少个模式可以覆盖所有的边,也就是 ...

  5. 用EXCEL的VBA将PHPCMS的备份文件转换成HTML的一次尝试

    背景 有个PHPCMS的网站停了,但是网站的历史文章又想要看看,网站停了以后,管理员发来了网站的所有数据. 分析 因为不会PHP,所有本地环境跑网站不优先考虑. 有MySQL数据库文件,但是不熟悉My ...

  6. jslint

    auto execution/self execution/ Immediate function http://www.jslint.com/ (function () { 'use strict' ...

  7. BZOJ2428_均分数据_KEY

    题目传送门 这道题可以用C++的random_shuffle屮过去. random数列插入顺序,每次都插入数值和最小的那一组. #include <cmath> #include < ...

  8. LOJ #2473. 「九省联考 2018」秘密袭击

    #2473. 「九省联考 2018」秘密袭击 链接 分析: 首先枚举一个权值W,计算这个多少个连通块中,第k大的数是这个权值. $f[i][j]$表示到第i个节点,有j个大于W数的连通块的个数.然后背 ...

  9. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

  10. 《SLAM十四讲》个人学习知识点梳理

    0.引言 从六月末到八月初大概一个月时间一直在啃SLAM十四讲[1]这本书,这本书把SLAM中涉及的基本知识点都涵盖了,所以在这里做一个复习,对这本书自己学到的东西做一个梳理. 书本地址:http:/ ...