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 ...
随机推荐
- Java类是如何默认继承Object的?
原:https://juejin.im/post/5ca1e8ade51d454e6a300048 前言 学过Java的人都知道,Object是所有类的父类.但是你有没有这样的疑问,我并没有写exte ...
- cocoapods导入三方库头文件找不到问题
问题描述:使用cocoapods时,import 找不到头文件. 问题原因: 1.缓存导致 2.没设置头文件的目录. 1.解决办法: command + k 清理工程 ,找到DerivedData文件 ...
- 「iOS」你会用几种方法实现计时器
1.NSTimer 存在一定的误差,不管是一次性的还是周期性的timer得实际触发事件的时间,都会与所加入的runloop和runloopMode有关,如果此runloop正在执行一个连续性的运算,t ...
- Robosup3D平台搭建
目录 1.安装simspark及默认播放器 安装依赖库/下载simspark源码 编译并安装simspark 编译并安装rcssmonitor3d播放器 2.安装Roboviz播放器 安装java 安 ...
- 【数据结构与算法】001—栈与队列(Python)
栈与队列 1.栈(stacks)是一种只能通过访问其一端来实现数据存储与检索的线性数据结构,具有后进先出(last in first out,LIFO)的特征 2.队列(queue)是一种具有先进先出 ...
- HTTP性能测试工具wrk安装及使用
wrk 是一个很简单的 http 性能测试工具,没有Load Runner那么复杂,他和 apache benchmark(ab)同属于HTTP性能测试工具,但是比 ab 功能更加强大,并且可以支持l ...
- c++ 文件共享打开
_fsopen参数说明 #include<share.h> _fsopen 共享模式访问文件 //安全性比fopen高 _fsopen 以共享的方式打开文件或者流 FILE * ...
- Struts 2 访问Servlet API的方式
与Servlet API解耦的访问方式 与Servlet API耦合的访问方式 (tips:耦合既依赖) 1. 与Servlet API解耦的访问方式 2. 与Servlet API耦合 ...
- 常见面试算法题JS实现-仅用递归函数和栈操作逆序一个栈
前言: 因为JAVA和JS语言特性的不同,有些东西在JAVA中可能需要一些技巧和手段才能实现的复杂程序,但是在JS中可能就是天然存在的,所以这套书里面的题目不会全部用JS去实现一遍,因为可能JS的实现 ...
- sqlmap简单中文说明
首先下载需要的文件,如果是windows环境直接到http://sqlmap.org/下载安装所需要的文件即可. 更新 svn checkout https://svn.sqlmap.org/sqlm ...