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

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

news 2026/2/10 23:44:45

一、前言

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/10 11:13:58

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/8 5:11:39

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2026/1/31 20:22:32