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 ...
随机推荐
- 郑重推荐开源CANopen协议栈CANFestival(LGPL许可)!!!!!!!!
郑重推荐开源CANopen协议栈CANFestival(LGPL许可)!!!!!!!!(这条文章已经被阅读了 次) 时间:2010/03/04 06:47am 来源:winshton [这个贴子最后由 ...
- OVF3为订单原因分配成本中心时报错“成本中心未定义”,消息号:VT806
问题:OVF3为订单原因分配成本中心时报错“成本中心未定义”,消息号:VT806.KS03检查成本中心数据是已经建立的. 原因:OVF3往右边拉动,还有一个需要填入的字段“有效起始日”,此字段值必须在 ...
- mysql 系统用户最大文件打开数限制
纸上得来终觉浅,绝知此事多宕机...记录一下自己很蠢的一次故障处理过程. 上周的时候,一个刚上线的系统又开始反映登不上了,因为最近这个系统也老是出现这个问题,开发也一直在找问题中,所以也没太在意.于是 ...
- jquery 中的dom操作
jquery DOM 分为元素操作.属性操作.样式操作. 一.元素操作 1.查找 ①工具:jQuery选择器 2.创建和添加 ①代码格式:变量 = $('要创建的元素'): 注意点: 1 要使用标准的 ...
- HTML5基础知识总结(一)
新增的标签和属性 1.结构标签 article section aside nav header footer hgroup figure address 2.媒体标签 video audio emb ...
- JavaWeb基础—JSP自定义标签入门
自定义标签的作用:替换JSP页面的java代码 步骤:1.标签处理类(标签是一个对象,那也就需要先有类) 2.tld文件 它是一个xml(可以向c标签里借),一般放到WEB-INF下,不让客户端浏览器 ...
- Linux tree 命令乱码
今天在执行Linux下的tree命令的时候,出现了乱码.上网查了一下说需要使用tree --charset ASCII,强制使用ASCII字符.这样确实可以输出正常了.但是我的环境里的LANG=US. ...
- Android开发——代码中实现WAP方式联网
,移动和联通的WAP代理服务器都是10.0.0.172,电信的WAP代理服务器是10.0.0.200. 在Android系统中,对于获取手机的APN设置,需要通过ContentProvider来进行数 ...
- PPAS可以安装分区表
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页 [作者 高健@博客园 luckyjackg ...
- 5322: [Jxoi2018]排序问题
5322: [Jxoi2018]排序问题 链接 分析: 每次选一个出现次数最小的. 代码: #include<cstdio> #include<algorithm> #incl ...