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 ...
随机推荐
- PHP代码优化—array_push
PHP中数组插入数据通常有这么几种: 定义的时候直接赋值 $arr = array('apple', 'banana'); 使用数组变量操作 $arr = array(); $arr[] = 'app ...
- 卸载JLink驱动弹出“could not open INSTALL.LOG file”的解决方法
我的操作环境是Windows 10 64位,JLink驱动的版本是V4.96. 最近好久不用STM32了,打算把JLink驱动卸载掉,但是无论是用JLink驱动自带的卸载程序还是控制面板来卸载,都会弹 ...
- vue打包完样式冲突
在页面的<style> 后,加上scoped, 例: scoped是实现样式的私有化,使样式不容易被覆盖,不容易被修改,只对当前页面有效
- SpringCloud-微服务的注册与发现Eureka(二)
一.SpringCloud简介 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均 ...
- 我用 Python 爬取微信好友,最后发现一个大秘密
前言 你身处的环境是什么样,你就会成为什么样的人.现在人们日常生活基本上离不开微信,但微信不单单是一个即时通讯软件,微信更像是虚拟的现实世界.你所处的朋友圈是怎么样,慢慢你的思想也会变的怎么样.最近在 ...
- Android Studio: Could not download junit.jar (junit:junit:4.12)
下载了Android Studio 3.1.4,新建一个项目,选择Activity,结果gradle提示 Unable to resolve dependency for ':app@debugAnd ...
- [PLC]ST语言五:STL/RET/CMP/ZCP
一:STL/RET/CMP/ZCP 说明:简单的顺控指令不做其他说明. 控制要求:无 编程梯形图: 结构化编程ST语言: (*步进指令STL(EN,s);*) SET(M8002,S3); STL(T ...
- 图像处理和OpenCV初步
图像从数学和计算机的角度理解就是一个矩阵,矩阵中的每一个元素叫做像素,又由于图像有灰度图像和彩色图像之分,所以图像在矩阵的基础上引入通道(channel),其中色彩用数字来表示的时候,规定数字0表示黑 ...
- python 思维导图-linux命令
linux基础 linux关于文件/目录的终端命令 linux关于文件内容处理的终端命令
- 浏览器初始页面设置及被hao123劫持解决办法
最近在用浏览器时打开初始页面都是hao123,喵喵喜欢简单干净的页面,就去设置初始页面. 此处放置初始页面参考(并不太难): https://jingyan.baidu.com/article/11c ...