当前位置： 首页 > news >正文

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

news 2026/2/10 19:31:02

一、前言

本来项目使用的是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-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.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>

四、效果展示

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

在这里插入图片描述

相关文章：

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

一、前言 本来项目使用的是OCX方式做签字的&#xff0c;因为项目需要转到国产化&#xff0c;不在支持OCX方式&#xff0c;需要使用前端进行签字操作 注&#xff1a;有啥问题看看文档&#xff0c;或者换着思路来&#xff0c;本文仅供参考&#xff01; 二、使用组件 获取jSign…...

编程日记 2023/9/7 6:51:30

【AIGC系列】Stable Diffusion 小白快速入门课程大纲

一、前言 本文是《Stable Diffusion 从入门到企业级应用实战》系列课程的前置学习引导部分&#xff0c;《Stable Diffusion新手完整学习地图课程》的课程大纲。该课程主要的培训对象是&#xff1a; 没有人工智能背景,想快速上手Stable Diffusion的初学者&#xff1b;想掌握St…...

编程日记 2023/9/7 6:50:29

在kali环境下安装Beef-Xss靶场搭建

目录 一、更新安装包 二、安装beef-xss 三、启动Beef-Xss工具 1、查看hook.js 2、查看后台登录地址 3、查看用户名和登录密码 4、登录页面 5、点击 Hook me:将配置的页面导入BEEF中 一、更新安装包 ┌──(root㉿kali)-[/home/kali] └─# apt-get update 二、安装be…...

编程日记 2023/9/7 6:49:27

【Apollo】自动驾驶技术的介绍

阿波罗是百度发布的名为“Apollo&#xff08;阿波罗&#xff09;”的向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。 帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快速搭建一套属于自己的自动驾驶系统。 百度开放此项计划旨在建立一个以合作为中…...

编程日记 2023/9/7 6:48:26

HTML emoji整理 表情符号

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>测试</title></head><body><div style"font-size: 50px;">&#128276</div><script>let count 0d…...

编程日记 2023/9/7 6:47:25

【蒸汽冷凝器型号和PI控制】具有PID控制的蒸汽冷凝器的动力学模型（MatlabSimulink）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/9/7 6:46:24

mall ：hutool项目源码解析

文章目录 一、mall开源项目1.1 来源1.2 项目转移1.3 项目克隆 二、Hutool工具类库2.1 Hutool 简介 三、源码解析3.1 集成与配置3.1.1 导入依赖3.1.2 添加配置 3.2 核心工具类3.2.1 AnnotationUtil使用&#xff1a;注解工具类3.2.2 BeanUtil使用&#xff1a;JavaBean的工具类3.2…...

编程日记 2023/9/7 6:45:22

【网络编程】TCP传输控制协议（Transmission Control Protocol）

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…...

编程日记 2023/9/7 6:44:21

云原生Kubernetes:kubectl管理命令

目录 一、理论 1.kubectl 管理命令 2.项目的生命周期 二、实验 1.kubectl 管理命令 2.项目的生命周期 三、总结 一、理论 1.kubectl 管理命令 &#xff08;1&#xff09;陈述式资源管理方法 kubernetes集群管理集群资源的唯一入口是通过相应的方法调用apiserver的接口…...

编程日记 2023/9/7 6:43:19

前端面试的话术集锦第 5 篇：高频考点( 类型转换 深浅拷贝 模块化机制等)

这是记录前端面试的话术集锦第五篇博文——高频考点(类型转换 & 深浅拷贝 & 模块化机制等)，我会不断更新该博文。❗❗❗ 1. typeof类型判断： typeof是否能正确判断类型？ instanceof能正确判断对象的原理是什么 typeof对于原始类型来说，除了null都可以显示正确的类…...

编程日记 2023/9/7 6:42:18

微服务·架构组件之网关

微服务架构组件之网关 引言 微服务架构已成为构建大型和复杂应用程序的流行范式之一。在微服务架构中&#xff0c;通常一个系统会被拆分为多个微服务&#xff0c;如果 客户端多次请求不同的微服务&#xff0c;会增加客户端代码和配置的复杂性&#xff0c;维护成本比较高。每…...

编程日记 2023/9/7 6:41:18

Google 开源库Guava详解

一、概述 Guava是一组来自Google的核心Java库&#xff0c;包括新的集合类型&#xff08;如多映射和多集&#xff09;、不可变集合、图库和并发、I/O、哈希、原语、字符串等实用程序&#xff01;它广泛用于Google中的大多数Java项目&#xff0c;也被许多其他公司广泛使用。 Gua…...

编程日记 2023/9/7 6:40:17

ISP——3A算法

目录 前沿一. 自动曝光AE1.1. 自动曝光1.2. 18%灰1.3. 测光区域1.4. 摄影曝光加法系统1.5. AE算法1.5.1. 考虑事项1.5.2. AE实现过程 1.6. AE算法 二. 自动对焦AF2.1. 什么是自动对焦2.2. 图像清晰度评价方法2.2.1. Brenner 梯度函数2.2.2. Tenengrad 梯度函数2.2.3. Laplacian…...

编程日记 2023/9/7 6:39:16

Go语言入门指南

Go语言入门指南 Go语言&#xff0c;通常称为Golang&#xff0c;是一门由Google开发的开源编程语言。它因其简洁、高效和强大的特性而备受开发者欢迎。本篇博客将带你深入了解Go语言的基础知识&#xff0c;让你能够开始编写自己的Go程序。 为什么选择Go语言&#xff1f; 在学…...

编程日记 2023/9/7 6:38:15

【Hive SQL 每日一题】统计用户连续下单的日期区间

文章目录 测试数据需求说明需求实现 测试数据 create table test(user_id string,order_date string);INSERT INTO test(user_id, order_date) VALUES(101, 2021-09-21),(101, 2021-09-22),(101, 2021-09-23),(101, 2021-09-27),(101, 2021-09-28),(101, 2021-09-29),(101, 20…...

编程日记 2023/9/7 6:37:14

RabbitMQ 镜像集群部署

镜像集群原理 特征 默认情况下&#xff0c;队列只保存在创建该队列的节点上。而镜像模式下&#xff0c;创建队列的节点被称为该队列的主节点&#xff0c;队列还会拷贝到集群中的其它节点&#xff0c;也叫做该队列的镜像节点。 但是&#xff0c;不同队列可以在集群中的任意节…...

编程日记 2023/9/7 6:36:13

SpringMVC框架学习

java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 【黑马程序员pink老师前端】HTML 【黑马程序员pink老师前端】JavaScript基础大总结 【黑马程序员pink老师前端】JavaScript函数与作用域 【黑马程序员pink老师前端】JavaScript对象 数据库 【黑马程…...

编程日记 2023/9/7 6:35:12

多通道振弦数据记录仪应用桥梁安全监测的解决方案

多通道振弦数据记录仪应用桥梁安全监测的解决方案 城市化进程的加快和交通运输的发展&#xff0c;桥梁作为连接城市的重要交通工具&#xff0c;其安全性也变得越来越重要。为了保证桥梁的安全性&#xff0c;需要进行定期的监测和维护。其中&#xff0c;多通道振弦数据记录仪是…...

编程日记 2023/9/7 6:34:11

RDMA 相关bug记录

对于 Client 来讲&#xff0c;setupConnection 中的 cm_id 应该是本地的&#xff0c;意味着后续 create pd \ cq \ qp 等等传入的 cm_id 都是本地 id。但是对于 Server 来讲&#xff0c;收到 client 的链接请求时将 client 的 cm_id 传入 setupConnection&#xff0c;意味着后续…...

编程日记 2023/9/7 6:33:10

TDengine函数大全-时序库特有函数

以下内容来自 TDengine 官方文档 及 GitHub 内容 。 以下所有示例基于 TDengine 3.1.0.3 TDengine函数大全 1.数学函数 2.字符串函数 3.转换函数 4.时间和日期函数 5.聚合函数 6.选择函数 7.时序数据库特有函数 8.系统函数 时序库特有函数 TDengine函数大全CSUMDERIVATIVEDIFF…...

编程日记 2023/9/7 6:32:09

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/31 15:00:15

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/31 8:25:07

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2026/2/4 17:34:02

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2026/2/5 5:58:30

数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

编程新知 2026/2/4 23:58:11

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2026/2/1 12:04:40