设置bootstrap的modal垂直居中

news2024/11/16 3:33:23

效果:
在这里插入图片描述
代码:
在这里插入图片描述

updateEmpModal 指的是我的模态框id
 $("#updateEmpModal").modal("show");
// show 方法调用之后立即触发该事件
$('#updateEmpModal').on('shown.bs.modal', function(){
    let $this = $(this);
    let $modal_dialog = $this.find('.modal-dialog');
    // 垂直居中,如果觉得离top太远了可以修改除数,上面的图除数我改为了3
    let m_top = ( $(window).height() - $modal_dialog.height() )/2;
    $modal_dialog.css({'margin': m_top + 'px auto'});
});

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

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

相关文章

elementui 修改日期选择器el-date-picker样式

1. 案例: 2. css /* 最外层颜色 */ .el-popper.is-pure {background: url("/assets/imgList/memuBG.png") no-repeat;border: none;background-size:100% 100%}/* 日期 1.背景透明 */ .el-date-picker{background: transparent; }/* 日期 2.标题、左右图…

C++碎知识点

二叉树 由 n个节点构成的形态不同的⼆叉树 同余符号 定义设m是大于1的正整数,a,b是整数,如果m|(a-b),则称a与b关于模m同余,记作abmod(m),读作a同余于b模m。 符号& 按位与 后赋值 C语言中计算优先级

业务数据“一站式”数据管理平台,从设备实时数据和业务应用数据两个方面要彻底解决“信息孤岛”的问题

1. 产品背景 工业数据大致分为两种数据:设备实时数据和业务应用数据。 设备实时数据的管理是iNeuOS工业互联网操作系统的基础平台重要组成部分,要求数据的实时性、稳定性,通过设备驱动(数据交互驱动)、服务驱动&…

[oneAPI] 图像分类CIFAR-10

[oneAPI] 图像分类CIFAR-10 图像分类参数与包加载数据模型训练过程结果 oneAPI 比赛:https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI:https://devcloud.intel.com/oneapi/get_started/aiAnalyticsToolkitSam…

JVM——JVM 垃圾回收

文章目录 写在前面本节常见面试题本文导火索 1 揭开 JVM 内存分配与回收的神秘面纱1.1 对象优先在 eden 区分配1.2 大对象直接进入老年代1.3 长期存活的对象将进入老年代1.4 动态对象年龄判定1.5 主要进行 gc 的区域 2 对象已经死亡?2.1 引用计数法2.2 可达性分析算…

【C++】set/multiset容器

1.set基本概念 #include <iostream> using namespace std;//set容器构造和赋值 #include<set>//遍历 void printSet(const set<int>& st) {for (set<int>::const_iterator it st.begin(); it ! st.end(); it){cout << *it << " …

网络编程学习

网络编程 软件结构 C/S结构&#xff1a;QQ、迅雷、百度网盘 程序员&#xff1a;开发客户端和服务端程序用户&#xff1a;需要下载升级更新客户端对网络带宽要求相对较低数据安全性相对较高 B/S结构&#xff1a;IE、谷歌、火狐 程序员&#xff1a;只需要开发服务端程序用户&am…

泛微E-Office任意文件上传漏洞复现

0x01 产品简介 泛微E-Office是一款标准化的协同 OA 办公软件&#xff0c;泛微协同办公产品系列成员之一,实行通用化产品设计&#xff0c;充分贴合企业管理需求&#xff0c;本着简洁易用、高效智能的原则&#xff0c;为企业快速打造移动化、无纸化、数字化的办公平台。 0x02 漏…

【云原生,k8s】基于Helm管理Kubernetes应用

第四阶段 时 间&#xff1a;2023年8月18日 参加人&#xff1a;全班人员 内 容&#xff1a; 基于Helm管理Kubernetes应用 目录 一、Kubernetes部署方式 &#xff08;一&#xff09;minikube &#xff08;二&#xff09;二进制包 &#xff08;三&#xff09;Kubeadm …

米尔瑞萨RZ/G2L开发板-02 ffmpeg的使用和RTMP直播

最近不知道是不是熬夜太多&#xff0c;然后记忆力减退了&#xff1f; 因为板子回来以后我就迫不及待的试了一下板子&#xff0c;然后发现板子有SSH&#xff0c;但是并没有ffmpeg&#xff0c;最近总是在玩&#xff0c;然后今天说是把板子还原一下哇&#xff0c;然后把官方的固件…

Linux系统之wget命令的基本使用

Linux系统之wget命令的基本使用 一、wget命令介绍二、本次实践环境三、wget命令的使用帮助3.1 wget命令的基本语法3.2 wget选项解释 四、安装wget工具4.1 检查yum仓库状态4.2 安装wget工具 五、wget命令的基本使用5.1 直接下载文件5.2 下载时指定文件名5.3 后台下载文件5.4 限速…

视频汇聚/视频云存储/视频监控管理平台EasyCVR如何进行CDN转推?

视频汇聚/视频云存储/集中存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、云存储、智能分析等&#xff0c;视频智能分析平台EasyCVR融合性强、开放度…

postgresql中基础sql查询

postgresql中基础sql查询 创建表插入数据创建索引删除表postgresql命令速查简单查询计算查询结果 利用查询条件过滤数据模糊查询 创建表 -- 部门信息表 CREATE TABLE departments( department_id INTEGER NOT NULL -- 部门编号&#xff0c;主键, department_name CHARACTE…

【【verilog典型电路设计之FIR滤波器的设计】】

verilog典型电路设计之FIR滤波器的设计 我们常用的FIR滤波器称为有限冲激响应 是一种常用的数字滤波器 &#xff0c;采用对已输入样值的加权和来形成它的输出。 对于输入序列X[n] 的FIR滤波器可用下图所示的结构示意图来表示&#xff0c;其中X[n] 是输入数据流。各级的输入连…

Idea中隐藏指定文件或指定类型文件

Setting ->Editor ->Code Style->File Types → Ignored Files and Folders输入要隐藏的文件名&#xff0c;支持*号通配符回车确认添加

微服务中间件--分布式事务

分布式事务 a.理论基础1) CAP定理2) BASE理论 b.Seata1) XA模式1.a) 实现XA模式 2) AT模式3) TCC模式3.a) 代码实现 4) Saga模式5) 四种模式对比6) TC的异地多机房容灾架构 a.理论基础 1) CAP定理 分布式系统有三个指标&#xff1a; Consistency&#xff08;一致性&#xff…

计算机视觉之三维重建(二)(摄像机标定)

标定示意图 标定目标 P ′ M P w K [ R T ] P w P^{}MP_wK[R \space T]P_w P′MPw​K[R T]Pw​ 其中 K K K为内参数&#xff0c; [ R T ] [R \space T] [R T]为外参数。该式子需要使用至少六对内外点对进行求解内外参数&#xff08;11个未知参数&#xff09;。 其中 R 3 3 …

【快应用】快应用广告学习之激励视频广告

【关键词】 快应用、激励视频广告、广告接入 【介绍】 一、关于激励视频广告 定义&#xff1a;用户通过观看完整的视频广告&#xff0c;获得应用内相关的奖励。适用场景&#xff1a;游戏/快游戏的通关、继续机会、道具获取、积分等场景中&#xff0c;阅读、影音等应用的权益体系…

二、SQL,如何实现表的创建和查询

1、新建表格&#xff08;在当前数据库中新建一个表格&#xff09;&#xff1a; &#xff08;1&#xff09;基础语法&#xff1a; create table [表名]( [字段:列标签] [该列数据类型] comment [字段注释], [字段:列标签] [该列数据类型] comment [字段注释], ……&#xff0c…

Spring Clould 服务间通信 - Feign

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; Feign-基于Feign远程调用&#xff08;P30&#xff09; 先来看我们以前利用RestTemplate发起远程调用的代码&#xff1a; 存在下面的问题&#xff1a; 代码可读性差&#xff0c…