记录使用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,一经查实,立即删除!

相关文章

九章云极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; 项目交流讨论…

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…

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…

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

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

这可能是最全面的Python入门手册了!

无论是学习任何一门语言&#xff0c;基础知识一定要扎实&#xff0c;基础功非常的重要&#xff0c;找到一个合适的学习方法和资料会让你少走很多弯路&#xff0c; 你的进步速度也会快很多&#xff0c;无论我们学习的目的是什么&#xff0c;不得不说Python真的是一门值得付出时间…

代码泄漏无感知?代码安全审计构筑企业核心资产安全防线

目录 一个不眠之夜 源代码托管&#xff1a;最容易被从内部攻破的堡垒 审计事件&#xff0c;构建源代码安全防护的“最后一道防线” 源代码托管审计事件三要素 源代码托管审计事件的价值 极狐GitLab 审计事件功能 极狐GitLab 审计事件功能特点 极狐GitLab 审计事件功能使…

Support for password authentication was removed on August 13, 2021 解决方案

打开你的github&#xff0c;Setting 点击Developer settings。 点击generate new token 按照需要选择scope 生成token&#xff0c;以后复制下来。 给git设置token样式的remote url git remote set-url origin https://你的tokengithub.com/你的git用户名/仓库名称.git然后就可…

Docker 搭建Redis 集群之路

前言 搞技术就是动手&#xff0c;动手再动手&#xff0c;实践出真知&#xff0c;毕竟最终是要解决问题的呢&#xff0c;废话不多讲&#xff0c;开搞&#xff0c;主要是为了记录一下&#xff0c;毕竟过程还是有点艰辛呢需求&#xff08;target&#xff09; Windows 电脑 装一个…

python 笔记(1)——基础和常用部分

目录 1、print 输出不换行 2、格式化输出字符串 3、浮点数的处理 4、进制转换和ASCII与字符间的转换 5、随机数 6、字符串截取和内置方法 6-1&#xff09;字符串截取 6-2&#xff09;字符串内置方法 7、元组、列表&#xff0c;及其遍历方式 7-1&#xff09;列表常用内…

为什么5G 要分离 CU 和DU?(4G分离RRU 和BBU)

在 Blog 一文中&#xff0c;5G--BBU RRU 如何演化到 CU DU&#xff1f;_5g rru_qq_38480311的博客-CSDN博客 解释了4G的RRU BBU 以及 5G CU DU AAU&#xff0c;主要是讲了它们分别是什么。但是没有讲清楚 为什么&#xff0c;此篇主要回答why。 4G 为什么分离基站为 RRU 和 BBU…