HTML页面使用layer弹出框输入数据
javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果。详细介绍http://layer.layui.com/ 部署:将layer.js文件和skin目录复制到项目的./static/js目录中,在页面中引用js/layer.js
<script >
function add_account() {
var index = layer.open({ //打开layer弹出框
type: 1, //类型
skin: "layui-layer-rim", //皮肤类型,在skin文件夹中
area: ["400px", "400px"], //范围大小
title: "标题", //定义标题
content: 'html字符串', //输出的字符串,定义弹出框的html页面
btn: ['确定', '取消'], //按钮
yes: function (index, layero) { //确定按钮的处理函数
id_name = $("#id_name").val(); //根据id取数据
$.ajax({
url: '{% url "urlname" %}', //指向URL名称
type: 'POST', //页面传值类型
data: {"key": ’value’}, //提交数据,以字典的形式
success: function (e) { //提交数据成功后的处理函数,e是返回的值
if (e == 1) {
parent.location.reload(); //刷新父页面
layer.msg("good");
} else {
layer.msg("sorry")
}
},
});
},
btn2: function (index, layero) { //取消按钮后的处理函数
layer.close(index);
},
});
}
</script >
HTML页面使用layer弹出框输入数据的更多相关文章
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
- layer弹出框确定前验证:弹出消息框(弹出两个layer)
作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...
- layer弹出框,zIndex不断增加的问题
针对layer弹出框每次进行弹出操作时z-index不断加1的问题,手动设置过zIndex值不管用,每次关闭时清空layer对象也不管用. 解决办法: 修改layer.js,,将红框代码改为绿框代码, ...
- 关于Layer弹出框初探
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...
- layer弹出框插件参数及方法介绍
layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...
- layer弹出框的用法
页面中引入 layer.js 就行了 1.弹出一个提示信息: layer.msg("我是哦提示信息"); 2.弹出一个带选择的按钮的框 layer.open({ title: ' ...
- jquery的Layer弹出框操作
在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...
- layer弹出框的简易封装和使用
1. 封装layer 下载layer绿色版和jquery引入页面 <!DOCTYPE html> <html lang="zh-CN"> . . . < ...
- Bootstrap方法为页面添加一个弹出框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- calc()使用用法
calc()是css3的一个新增的功能,用来指定元素的长度. 它是动态设置元素值,可由加减乘除算法得到最后计算值. 比如说“width:calc(50% + 5em)” 在使用less解析中calc运 ...
- LeetCode 94. Binary Tree Inorder Traversal 二叉树的中序遍历 C++
Given a binary tree, return the inorder traversal of its nodes' values. Example: Input: [,,] \ / Out ...
- Linux命令、脚本
1.传文件 FTP/SFTP:ftp 用户名@远程ip SCP:注意ip后有个 : 本地文件发到远程 scp 本地文件 用户名@远程ip:远程路径 远程文件发到本地 scp 用户名@远程ip: ...
- boost的named_mutex的一些坑
最近遇到一个问题,程序在a用户下运行后,然后注销windows,登陆b用户,发现程序奔溃,抓了下堆栈,发现了boost的named_mutex一些细节,记录下 #include <boost/i ...
- python-day5内置模块time、range、sys、os、shelve、xml、max等
@os树状目录 import os,os.path def showdir(path,depth): if depth==0: print(path) for item in ...
- C++_数字时钟软件实现设计
利用C++学习内容,通过windows自带函数实现一个简易的时钟 #include<iostream> #include<windows.h> //延时与清屏头文件 using ...
- sql中的不常见查询
1.对于CROSS APPLY 和 OUTER APPLY 的应用: CROSS APPLY 类似于INNER JOIN 但是,可以规定对于满足条件的数据需要关联几行,应用场景: 每个零件把第一个工单 ...
- window Linux 双系统安装
我是先安装的win10,然后在其基础上又安装了Ubuntu 16.04,为了今后再次安装方便,这里记录一下安装过程. 我在安装时主要参考了文章:https://blog.csdn.net/flyyuf ...
- <Dare To Dream>团队项目用户验收评审
实验十二 团队作业8—团队项目用户验收评审 任务1:团队作业Beta冲刺 Beta冲刺第一天:http://www.cnblogs.com/Dare-To-Dream/p/9226994.html B ...
- ArcGIS按选定线分割面-案例教程
ArcGIS按选定线分割面-案例教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 功能 方法:高级编辑 实例: 分割前后 联系方式:谢老师,135-4855-43 ...