记录使用layui弹窗实现签名、签字

一、前言

本来项目使用的是OCX方式做签字的,因为项目需要转到国产化,不在支持OCX方式,需要使用前端进行签字操作

注:有啥问题看看文档,或者换着思路来,本文仅供参考!

二、使用组件

获取jSignature
方法一:jSignature官网
方法二:BootCDN 这里面的各种组件库挺全面

三、相关代码

<!DOCTYPE html>
<html lang="zh">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="content-type" content="no-cache"/><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"><link href="../libs/layui/css/layui.css" rel="stylesheet">
</head>
<style>.layui-layout-admin .layui-header {background-color: #fff;}.layui-layout-admin .layui-body {position: inherit;}.layui-container {margin-top: 64px;}.layui-container img {width: 800px;}
</style>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-btn-container" style="margin-top: 12px;text-align: center;"><button type="button" class="layui-btn layui-btn-lg" lay-active="sign">签字</button></div></div><div class="layui-body"><div class="layui-container"><div align="center"><img src="../images/evaluate_bg.png"></div></div></div>
</div><div class="layui-row" id="signDiv" style="display: none;"><div id="signatureparent"><div id="signature" style="border: 2px dotted lightgrey;"></div></div><div class="layui-btn-container" style="text-align: right;margin-top: 15px;"><button type="button" class="layui-btn layui-bg-orange layui-btn-lg" onclick="toReset()">重写</button><!--        <button type="button" class="layui-btn layui-btn-lg" οnclick="toUndo()">撤销</button>--><button type="button" class="layui-btn layui-bg-blue layui-btn-lg" onclick="getData()">提交</button><button type="button" class="layui-btn layui-btn-danger layui-btn-lg" onclick="toDestroy();">关闭</button></div>
</div>
<script src="../jquery/jquery-1.8.3.js"></script>
<script src="../libs/jSignature/jSignature.min.js"></script>
<script src="../libs/layui/layui.js"></script>
<script type="text/javascript">var signature;layui.use(function () {var util = layui.util, $ = layui.$;// 触发事件util.on('lay-active', {'sign': function () {// 在此处输入 layer 的任意代码layer.open({type: 1, // page 层类型area: ['800px', '430px'],title: '<h3>请签名:</h3>',shade: 0.6, // 遮罩透明度// shadeClose: true, // 点击遮罩区域,关闭弹层closeBtn: 0,anim: 6, // 0-6 的动画形式,-1 不开启content: $('#signDiv'),success: function () {signature = $('#signature').jSignature({height: '300px',width: '100%'});//初始化控件}});}});});function toReset() {signature.jSignature('reset');}function getData() {var data = signature.jSignature("getData", "image");var isModified = signature.jSignature("isModified");if (!isModified) {layer.msg('请先完成签字,在提交');return false;}// 可以添加保存签字图片的逻辑,如生成下载链接或上传到服务器}function toDestroy() {signature.jSignature("destroy");layer.closeAll();}
</script>
</body>
</html>

如果需要开启撤销
配置如下:

//初始化控件
signature = $('#signature').jSignature({height: '300px',width: '100%',UndoButton: true//撤销按钮
});

内置撤销按钮效果如下:
在这里插入图片描述
内置的撤销按钮看起来不美观,如何自定义呢
1、可以直接修改JS中该按钮的CSS代码
2、隐藏内置按钮,外面重新定义按钮进行操作(虽然我这种做法,有些投机取巧了)
废话就不多说了,相关代码如下
1)隐藏内置按钮

#signature input{display: none!important;
}

2)自定义按钮操作

 function toUndo() {$('#signature input[type="button"]').click();}

四、效果展示

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/70921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java对象内存布局和对象头

文章目录 Java对象内存布局和对象头对象内存布局对象头Mark Word实例数据对齐填充对象头和性能总结Java对象内存布局和对象头 在Java中,对象是一个类的实例化,也就是说,一个对象包含其类的属性和方法。当我们实例化一个对象时,JVM会在Heap中为其分配一块连续的内存空间。这…

九章云极DataCanvas公司参与大模型重点项目合作签约,建设产业集聚区

9月3日&#xff0c;2023中国国际服务贸易交易会石景山国际开放合作论坛在石景山首钢园成功举办&#xff0c;北京市委常委、常务副市长夏林茂&#xff0c;商务部服务贸易和商贸服务业司司长王东堂&#xff0c;北京市石景山区委书记常卫出席论坛并致辞。论坛期间正式举行“石景山…

java8 新特性

1、lambda表达式 Lambda 是一个 匿名函数&#xff0c;我们可以把 Lambda 表达式理解为是 一段可以传递的代码&#xff08;将代码像数据一样进行传递&#xff09;。使用它可以写出更简洁、更灵活的代码。 &#xff08;1&#xff09;语法 Lambda 表达式&#xff1a;在Java 8 语…

STM32WB55开发(1)----套件概述

STM32WB55开发----1.套件概述 所用器件视频教学样品申请优势支持协议系统控制和生态系统访问功能示意图系统框图跳线设置开发板原理图 所用器件 所使用的器件是我们自行设计的开发板&#xff0c;该开发板是基于 STM32WB55 系列微控制器所构建。STM32WBXX_VFQFPN68 不仅是一款评…

【MyBatis篇】MyBatis框架基础知识笔记

目录 ORM思想&#xff08;对象关系映射思想&#xff09; 初识MyBatis 什么是MyBatis呢&#xff1f; JDBC VS MyBatis代码 获取数据库连接对比 对表格查询操作&#xff1a; JDBC弊端 MyBatis&#xff0c;JDBC对比 MyBatis进一步介绍以及本质分析 JDBC编程的劣势&…

VectorDraw Developer Framework 10.1004 Crack

VectorDraw 开发人员框架 (VDF) 是一个图形引擎库&#xff0c;开发人员可以使用它来可视化其应用程序。通过提供的功能&#xff0c;我们的客户可以轻松创建、编辑、管理、导出、导入和打印 2D 和 3D 绘图 - 图形文件。VDF 使用的强大格式称为 VDML&#xff08;以及与 VDML 相同…

ssprompt:一个LLM Prompt分发管理工具

阅读顺序 &#x1f31f;前言&#x1f514;ssprompt介绍命令介绍Metafile介绍版本依赖规则 &#x1f30a; PromptHubGitHub Token &#x1f680; Quick Install系统依赖pip安装Linux, macOS, Windows (WSL)Windows (Powershell) &#x1f6a9; Roadmap&#x1f30f; 项目交流讨论…

Winodws10测试驱动禁用签名

以管理员权限打开CMD输入如下命令&#xff1a; bcdedit /set nointegritychecks on bcdedit /set testsigning on bcdedit /set loadoptions DDISABLE_INTEGRITY_CHECKS 然后就可以不用注册签名来测试自己写的驱动了。

好用免费的Chat GPT

MindLink麦灵 你问我答 灵感 持续更新中。。。。

12.redis 持久化

redis 持久化 redis 持久化redis持久化策略RDB > Redis DataBase 定期备份rdb 文件处理rdb 优缺点 AOF > Append Only File 实时备份AOF 工作流程AOF 缓冲区刷新策略AOF 重写机制AOF 重写流程 混合持久化持久化流程总结 redis 持久化 redis 是一个内存数据库&#xff0c…

【大数据模型】让chatgpt为开发增速(开发专用提示词)

汝之观览&#xff0c;吾之幸也&#xff01;本文主要聊聊怎样才能更好的使用提示词&#xff0c;给开发提速&#xff0c;大大缩减我们的开发时间&#xff0c;比如在开发中使用生成表结构脚本的提示词&#xff0c;生成代码的提示词等等。 一、准备 本文主要根据Claude进行演示&am…

【产线故障】线上接口请求过慢如何排查?

文章目录 前言一、内存使用过高导致CPU满载案例代码分析思路 二、出现了类似死循环导致cpu负载案例代码分析思路 三、死锁案例代码分析思路 前言 首先线上接口变慢&#xff0c;原因可能有很多&#xff0c;有可能是网络&#xff0c;有可能是慢 SQL&#xff0c;有可能是服务本身…

【Linux】- 一文秒懂shell编程

shell编程 1.1 Shell 是什么1.2 Shell 脚本的执行方式1.3 编写第一个 Shell 脚本2.1 Shell 的变量2.2 shell 变量的定义2.3 设置环境变量3.1 位置参数变量3.2 预定义变量4.1 运算符4.2 条件判断5.1 流程控制5.2 case 语句5.3 for 循环5.4 while 循环5.5 read基本语法6.1函数6.2…

Nginx 本地部署服务

nginx 部署服务 一、下载二、解压三、文件替换四、浏览器中输入五、离线部署瓦片服务 一、下载 可以到官网下载&#xff0c;官方网址&#xff1a;https://nginx.org/也可以用我发的包 二、解压 三、文件替换 解压打开后文件&#xff0c;双击 nginx.exe 浏览器输入 localhost…

Ubuntu/linux系统环境变量配置详解

一 环境变量配置文件解释 /etc/profile 在登录时,操作系统定制用户环境时使用的第一个文件 ,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行。 /etc /environment 在登录时操作系统使用的第二个文件, 系统在读取你自己的profile前,设置环境文件的环境变…

springboot之一:配置文件(内外部配置优先顺序+properties、xml、yaml基础语法+profile动态切换配置、激活方式)

配置的概念&#xff1a; Spring Boot是基于约定的&#xff0c;所以很多配置都有默认值&#xff0c;但如果想使用自己的配置替换默认配置的话&#xff0c;就可以使用application.properties或者application.yml(application.yaml)进行配置。 注意配置文件的命名必须是applicat…

【LeetCode每日一题合集】2023.8.28-2023.9.3(到家的最少跳跃次数)

文章目录 57. 插入区间823. 带因子的二叉树解法——递推 1654. 到家的最少跳跃次数(BFS&#xff0c;&#x1f6b9;最远距离上界的证明)1761. 一个图中连通三元组的最小度数2240. 买钢笔和铅笔的方案数解法1——完全背包解法2——枚举买了几支钢笔&#xff08;推荐解法&#xff…

【ts】Partial<T>

Partial是ts中的一个内置类型&#xff0c;它用于定义对象类型的部分属性&#xff0c;当使用Partial<T>来定义一个类型T的部分类型时&#xff0c;它会将T中的属性变为可选属性&#xff08;即既可以有值又可以没值&#xff09;&#xff0c;这样就可以只提供T的一部分属性&a…

一分钟教你学会浏览器调试工具debugger

当使用谷歌浏览器或者vscode进行前端调试时&#xff0c;可以使用以下方法进行详细调试&#xff1a; 谷歌浏览器&#xff1a; 打开谷歌浏览器&#xff0c;并在地址栏中输入要调试的页面的 URL 地址。 按下 Ctrl Shift I&#xff08;Windows/Linux&#xff09;或 Command Opt…

LGFormer:LOCAL TO GLOBAL TRANSFORMER FOR VIDEO BASED 3D HUMAN POSE ESTIMATION

基于视频的三维人体姿态估计的局部到全局Transformer 作者&#xff1a;马海峰 *&#xff0c;陆克 * †&#xff0c;薛健 *&#xff0c;牛泽海 *&#xff0c;高鹏程† * 中国科学院大学工程学院&#xff0c;北京100049 鹏程实验室&#xff0c;深圳518055 来源&#xff1a;202…