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弹出框输入数据的更多相关文章

  1. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  2. layer弹出框确定前验证:弹出消息框(弹出两个layer)

    作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...

  3. layer弹出框,zIndex不断增加的问题

    针对layer弹出框每次进行弹出操作时z-index不断加1的问题,手动设置过zIndex值不管用,每次关闭时清空layer对象也不管用. 解决办法: 修改layer.js,,将红框代码改为绿框代码, ...

  4. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

  5. layer弹出框插件参数及方法介绍

    layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...

  6. layer弹出框的用法

    页面中引入  layer.js 就行了 1.弹出一个提示信息: layer.msg("我是哦提示信息"); 2.弹出一个带选择的按钮的框 layer.open({ title: ' ...

  7. jquery的Layer弹出框操作

    在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...

  8. layer弹出框的简易封装和使用

    1. 封装layer 下载layer绿色版和jquery引入页面 <!DOCTYPE html> <html lang="zh-CN"> . . . < ...

  9. Bootstrap方法为页面添加一个弹出框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. LINUX新建和增加SWAP分区

    我们都知道在安装Linux系统时在分区时可以分配swap分区,而系统安装后(在运行中)如何建立或调整swap分区呢? 在装完Linux系统之后,建立Swap分区有两种方法. 1.新建磁盘分区作为swa ...

  2. bits change world

    No code is the best way to write secure and reliable applications. Write nothing; deploy nowhere.

  3. 利用checkbox自带属性indeterminate构建含部分选中状态的树状结构

    本来上个月就像发的,但是一直忙啊忙的也没时间整理,所以拖到了现在. 好吧上面这句就是废话,我就是感概下.下面是正文. 前段时间在弄一个轻量级的web项目,要构建一个树状结构目录,同时希望能把部分选中的 ...

  4. 《python编程快速上手》

    第一部分 编程基础 @表达式 ** % // @ >>> int(3.4) 3 >>>round(3.555,2)3.56 @判断条件时:0和0.0和‘’都是Fal ...

  5. java和.net连接数据库的方法

    .net连接数据库的方法 App.config <connectionStrings> <add name="" connectionString="D ...

  6. c#控件 menuStrip(转)

    一.概述 菜单通过存放按照一般主题分组的命令将功能公开给用户. MenuStrip 控件是此版本的 Visual Studio 和 .NET Framework 中的新功能.使用该控件,可以轻松创建  ...

  7. ---Ubuntu 16.04 server 不能关机问题解决

    https://serverfault.com/questions/712928/systemctl-commands-timeout-when-ran-as-root Failed to start ...

  8. 云栖大会day2总结 上午

    第二天上午主要是参与了开发者专场 上 09:00-09:40 线上线下融合时代的工程师成长 李佩 饿了么高级算法总监 09:40-10:20 如何统一阿里巴巴代码规范:探寻工程师文化之路 玄坛 阿里巴 ...

  9. cmake安装

    下载之后 1.解压 root@zsh-linux:/opt#tar -zxvf  cmake-2.8.4.tar.gz 2.然后 cd 到cmake-2.8.4目录下  安装 root@zsh-lin ...

  10. JS数据类型之Number类型

    Number类型的转换及方法 var num = 10; num.toString() //"10"转字符串,参数表示几进制 num.toFixed(2) //10.00 自动舍入 ...