首先,引用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. Oracle 12.2 报错:ORA-12012: error on auto execute of job "SYS"."ORA$AT_OS_OPT_SY_7458"

    alert报错 2019-01-12T10:10:11.499130+08:00Errors in file /u01/app/oracle/diag/rdbms/rac1/rac112/trace/ ...

  2. C++程序设计入门(上) 之对象和类

    面向对象编程: 如何定义对象?  同类型对象用一 个通用的类来定义 class C { int p; int f(); }; C ca, cb; 一个类用变量来定义数据域,用函数定义行为. class ...

  3. python 3.x 循环读取文件用户登录

    import os # 导入python自带库的模块 import sys # 导入python自带库的模块 import getpass # 导入python自带库的模块 lock_file = ' ...

  4. Datax3.0使用说明

    一.datax3.0介绍 1.DataX 是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL.Oracle等).HDFS.Hive.ODPS.HBase.FTP等各种异构数据源之间稳 ...

  5. vb6 使用msxml2.serverxmlhttp 请求HTTP

    Private Sub Command1_Click() Command1.Enabled = False GetHtmlStr Text1 End Sub Private Sub GetHtmlSt ...

  6. JavaWeb总结(六)

    获取原始表单数据 - POST请求不仅可以传输文本信息还可以传输二进制数据 - 如果想得到请求中参数的原始字节数据,可以使用HttpServletRequest对象提供的getInputSteam() ...

  7. 2 python介绍

    1.Python介绍:龟叔 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语言的编译器.Python这个名字,来自Gui ...

  8. Navigation - How to define the structure of the navigation tree via the NavigationItemAttribute

    In the meantime, you should use the Model Editor to create such a navigation structure. There are se ...

  9. [PLC]ST语言七:MOV_SMOV_CML_BMOV_FMOV_XCH_BCD_BIN

    一:MOV/SMOV/CML/BMOV/FMOV/XCH/BCD/BIN 说明:简单的顺控指令不做其他说明. (MOV)控制要求:无 (MOV)编程梯形图: (MOV)结构化编程ST语言: (*传送指 ...

  10. JMeter下Groovy和BeanShell语言在不同组件中性能差异实践探究

    一般而言JMeter下性能最好的是jar包这类java原生请求,对于JMeter并没有原生支持的请求,一般都会将其直接编译为jar包,然后再JMeter中调用,这样性能最好. 但是有些需求并不适合用j ...