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

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

news 2026/2/9 6:35:29

一、前言

本来项目使用的是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方式做签字的，因为项目需要转到国产化，不在支持OCX方式，需要使用前端进行签字操作注：有啥问题看看文档，或者换着思路来，本文仅供参考！ 二、使用组件获取jSign…...

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

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

一、前言本文是《Stable Diffusion 从入门到企业级应用实战》系列课程的前置学习引导部分，《Stable Diffusion新手完整学习地图课程》的课程大纲。该课程主要的培训对象是： 没有人工智能背景,想快速上手Stable Diffusion的初学者；想掌握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（阿波罗）”的向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统，快速搭建一套属于自己的自动驾驶系统。百度开放此项计划旨在建立一个以合作为中…...

编程日记 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）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&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使用：注解工具类3.2.2 BeanUtil使用：JavaBean的工具类3.2…...

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

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

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

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

云原生Kubernetes:kubectl管理命令

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

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

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

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

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

微服务·架构组件之网关

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

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

Google 开源库Guava详解

一、概述 Guava是一组来自Google的核心Java库，包括新的集合类型（如多映射和多集）、不可变集合、图库和并发、I/O、哈希、原语、字符串等实用程序！它广泛用于Google中的大多数Java项目，也被许多其他公司广泛使用。 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语言，通常称为Golang，是一门由Google开发的开源编程语言。它因其简洁、高效和强大的特性而备受开发者欢迎。本篇博客将带你深入了解Go语言的基础知识，让你能够开始编写自己的Go程序。为什么选择Go语言？ 在学…...

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

文章目录测试数据需求说明需求实现测试数据 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 镜像集群部署

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

编程日记 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

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

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

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

RDMA 相关bug记录

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

编程日记 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

ip子接口配置及删除

配置永久生效的子接口，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

【UE5 C++】通过文件对话框获取选择文件的路径

目录效果步骤源码效果步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...

编程新知 2026/2/7 16:24:49

Qt Quick Dialogs模块功能及架构

Qt Quick Dialogs 是 Qt Quick 的一个附加模块，提供了一套用于创建和使用系统对话框的 QML 类型。在 Qt 6.0 中，这个模块经过了重构和增强。一、主要功能和特点 1. 对话框类型 Qt Quick Dialogs 在 Qt 6.0 中提供了以下标准对话框类型： …...

编程新知 2025/12/14 13:09:12