HTML页面使用layer弹出框输入数据

时间:2022-12-17 09:40:17
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弹出层时只显示遮罩层&comma;不显示弹出框问题

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

  2. layer弹出框确定前验证&colon;弹出消息框&lpar;弹出两个layer&rpar;

    作者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"> . . . &lt ...

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

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

随机推荐

  1. ItemIndex

    ItemIndex一般是列表的一个属性,比如TCombobox和TListBox都有,表示当前选中的项(Item)的下标(Index),如果没有选中,那它是-1,所以一般判断TCombox或TList ...

  2. (二)Bootstrap CSS 概览

    在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...

  3. 文字排版--删除线&lpar;text-decoration&colon;line-through&rpar;

    如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到: 上图中的原价上的删除线使用下面代码就可以实现: .oldPrice{text-decoration:line-through;}

  4. kubernetes kubeadm部署高可用集群

    k8s kubeadm部署高可用集群 kubeadm是官方推出的部署工具,旨在降低kubernetes使用门槛与提高集群部署的便捷性. 同时越来越多的官方文档,围绕kubernetes容器化部署为环境 ...

  5. linux 下dd命令直接清除分区表(不用再fdisk一个一个的删除啦)

    分区表是硬盘的分区信息,要删除一个硬盘的所有分区表很麻烦的,需要fdisk一个一个的删除,其实dd命令可直接清除分区信息,当然,这也是linux给root用户留下的作死方法之一.dd 命令主要参数如下 ...

  6. 《微软的软件测试之道》【PDF】下载

    <微软的软件测试之道>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382291 内容简介 书的第三部分探讨某些我们工作中使用过的 ...

  7. 解析配置文件redis&period;conf

    units单位: # 1k => 1000 bytes # 1kb => 1024 bytes # 1m => 1000000 bytes # 1mb => 1024*1024 ...

  8. (6)STM32使用HAL库实现modbus的简单通讯

    1.判断地址.校验 2.读取本机数据并校验打包 3.发送数据包 4.本机数据长度比要读取的长度短怎么办 4.校验错误怎么办

  9. 前端笔记之服务器&amp&semi;Ajax(下)数据请求&amp&semi;解决跨域&amp&semi;三级联动&amp&semi;session&amp&semi;堆栈

    一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...

  10. 22 python 初学(类,面向对象)

    python: 函数式 + 面向对象 函数式可以做所有的事,是否合适? 面向对象: 一.定义: 函数: def + 函数名(参数) 面向对象: class  -> 名字叫 Bar 类 def   ...