JavaScript实现弹出层(以layer.open为例)
首先,引用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为例)的更多相关文章
- Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
- 使用JavaScript实现弹出层效果
声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...
- javascript网页弹出层练习
网页中经常出现很多"popup"弹窗效果,这里做一个练习,给我们初学者一个参考. HTML代码: <div id="popup"></div& ...
- 使用JavaScript实现弹出层效果的简单实例
转自:https://www.jb51.net/article/85475.htm 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 ...
- Layui 弹出层组件——layer
layer是作为Layui[经典模块化前端框架]的一个弹层模块,由于其用户基数较大,所以把layer作为独立组件来维护. 基础参数: 基础参数主要指调用方法时用到的配置项,如:layer.open({ ...
- javascript对话框(弹出层)组件
http://www.blueidea.com/download/product/2010/7513.asp#comment 1. 从头到尾对一遍<<Javascript高级程序设计> ...
- 弹出层框架layer快速使用
layer官方及演示文档:layer官方及演示文档 1.将layer整个放入工程内. 2.文件内引入layer.js, <script type="text/javascript&qu ...
- 前端弹出层框架layer
http://www.layui.com/doc/modules/layer.html#layer.confirm
- layui弹出层回调的使用
<%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...
随机推荐
- UVa 10377 - Maze Traversal
題目:一個機器人在迷宮中行走,它的指令是方向控制(前進.左轉.右轉).給你初始位置和一些指令: 問最後停在那個位置. 分析:模擬.直接模擬就可以,注意一下細節. 假设,不能行走(邊界或者是墻壁)則停在 ...
- L2-022 重排链表(链表)
题目: 给定一个单链表 L1→L2→⋯→Ln−1→Ln,请编写程序将链表重新排列为 Ln→L1→Ln−1→L2→⋯.例如:给定L为1→2→3→4→5→6 ...
- jQuery----选择器(重点是层次选择器)
基本选择器 1.id选择器 ---------------------------->根据id来获取,只有一个.---------------------------------------- ...
- centos下安装myrocksdb
承接上一篇,https://www.cnblogs.com/lunyu/p/10190364.html .编译安装myrocks的整个过程,特别是第2步和第7步,让人冗长难耐.因此编译安装成功后省去这 ...
- python基础学习1-函数相关
#!/usr/bin/env python # -*- coding:utf-8 -*- 函数相关 def f1(par,par2,par3="ok"): #定义函数 带参数,带参 ...
- [HNOI2012]永无乡 线段树合并
[HNOI2012]永无乡 LG传送门 线段树合并练手题,写这篇博客只是为了给我的这篇文章找个板子题. 并查集维护连通性,对于不在同一个连通块内的合并操作每次直接合并两颗线段树,复杂度\(O(n \l ...
- springboot之jpa多数据源
1.随着业务复杂程度的增加,我们在单一数据源上面的使用越来越不满足具体的业务逻辑以及实现了. 2.那么多数据源,比如多库多数据库等,我们在使用一个工程的时候多数据源的连接还是很有必要的,这里做一下记录 ...
- SSIS 数据流的执行树和数据管道
数据流组件的设计愿景是快速处理海量的数据,为了实现该目标,SSIS数据源引擎需要创建执行树和数据管道这两个数据结构,而用户为了快速处理数据流,必须知道各个转换组件的阻塞性,充分利用流式处理流程,利用更 ...
- selenium无法正常运行 Chrome浏览器,cannot find Chrome binary的问题
有些同学在运行selenium-chrome时会遇到这个问题, System.setProperty("webdriver.chrome.driver","files/c ...
- IVF link error错误不显示的问题
遇到一个奇怪的问题,IVF编译链接时显示error LINK: 后面没有具体的错误信息(见后图,我的窗口后面是空的)环境:windows 10 64位系统,VS2017 commutity 版本, ...