弹出层,div的写法

layui使用日记之弹出层中事件的写法 需求介绍:需要在弹出层里面点击按钮上传文件 <script type="text/html" id="toolbarxiaoguize"> <div class="layui-btn-container"> <div class="layui-btn-group"> 阅读详情
$(document).ready(function(){
		

		
		//弹出层的html
		var openWindow = '<div id="middle_addFilterPurchaseOrder"></div><div id="msg_addFilterPurchaseOrder"></div>';
		//把弹出层加入到table的后面
		$('#unPackingTable').append(openWindow);
		
		//当点击背景时,隐藏弹出页
		$('#middle_addFilterPurchaseOrder').click(function() {
			$('#middle_addFilterPurchaseOrder,#msg_addFilterPurchaseOrder').hide();
		});

	});

function buildPackingSizeView(obj){//包装明细显示
		var index = (obj.id).split("_")[2];		
		var packSizeJsonArray = packingSizeJson[$("#packingLineId_"+index).val()];
		var array = eval(packSizeJsonArray);
		var tableHtml = "";
		//caohong 添加内盒料号和内盒名称栏位start
		tableHtml += '<table  align="left" cellpadding="0" cellspacing="0"  id="openWindow_table" style="border-collapse: collapse;" width="800px">';
		tableHtml += '<tr><th colspan="2"><%=title_packingDetail%></th><td colspan="4" style="border:0px solid #FFFFFF"> </td></tr>';
		tableHtml += '<tr><th><%=title_salesTableNo%></th><th><%=title_purchOrderFormNum%></th><th><%=title_size%></th><th><%=title_qtyPerBox%></th><th><%=title_pairWeight%></th><th><%=title_pairShoesWeight%></th><th><%=title_innerBox%></th><th><%=title_innerBoxMaterialName%></th></tr>';
		for(var i = 0 ; i < array.length ; i++){
			var grossWeight = array[i].netWeight; 
			var netWeight = array[i].grossWeight;
			grossWeight =  parseFloat(grossWeight).toFixed(2);
			netWeight =  parseFloat(netWeight).toFixed(2);
			tableHtml += '<tr>';
			tableHtml += '<td style="border:1px solid #000000">'+array[i].salesOrderNo+'</td><td style="border:1px solid #000000">'+array[i].purchOrderFormNum+'</td><td style="border:1px solid #000000">'+array[i].sizeName+'</td><td style="border:1px solid #000000">'+array[i].sizeQty+'</td><td style="border:1px solid #000000">'+grossWeight+'</td><td style="border:1px solid #000000">'+netWeight+'</td><td style="border:1px solid #000000">'+array[i].materialNo+'</td><td style="border:1px solid #000000"><span title="'+array[i].materialName+'">'+array[i].showMaterialName+'</span></td>';
			tableHtml += '</tr>';
		}
		//end
		tableHtml += '</table>';
		$('#msg_addFilterPurchaseOrder').html(tableHtml);
		//显示弹出框
		var width = ($(window).width()) + 'px';
		var height = ($(window).height()) + 'px';
		$('#msg_addFilterPurchaseOrder').width("850px");
		var p = {
			width : $('#msg_addFilterPurchaseOrder').width(),
			height : $('#msg_addFilterPurchaseOrder').height()
		};
		var left = ($(window).width() - p.width) / 2 + 'px';
		var top = ($(window).height() - p.height) / 2 + 'px';
		var allLeft = '0px';
		var allTop = '0px';
		$('#middle_addFilterPurchaseOrder').css({
			'width' : width,
			'height' : height,
			'left' : allLeft,
			'top' : allTop
		}).show();
		$('#msg_addFilterPurchaseOrder').css({
			'left' : left,
			'top' : top
		}).show();
	}

漂亮的div弹出窗口样式 一个漂亮的div弹出窗口样式 解压后双击html页面即可 立即下载

相关推荐

几种样式的DIV弹出层

几种样式的DIV弹出层,比较简单,实用。

js案例---弹出div窗口

js简单案例

forever_zc的博客 3010

自己写的一个弹出层插件

NULL 博文链接:https://kevin1.iteye.com/blog/717211

【JavaScript】简单实现弹出窗口div

JavaScript实现弹出窗口 思路 总体使用两个div,一个作为底层展示,一个做为弹出窗口; 两个窗口独立进行CSS设计,通过display属性进行设置现实与隐藏,此处建议使用display属性而不是visibility属性,visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,影响布局; 在js内设计两个onclick事件,分别指定函数,分别为开启弹窗和关闭弹窗。 一、设置两个div <html> <title>弹出窗口</t

Lee的博客 2万+

html5_div弹出层

html5_div弹出层

电机控制必看!SVPWM谐波优化:5段式与7段式全参数对比测试

本文通过实测数据,对比分析了电机控制中5段式与7段式SVPWM控制算法的谐波性能。实验表明,7段式SVPWM在电流波形质量(THD)和低速性能上更优,而5段式SVPWM则在开关损耗和效率方面表现突出。文章为工程师在不同应用场景(如对噪音、效率或动态响应的侧重)下的算法选型提供了清晰的依据和实用的工程指南。

weixin_28331555的博客 179

【转】用DIV实现弹出窗口

* 创建弹出div窗口。      1、接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象       参数:id 弹出窗口id;          title:弹出窗口标题名称;

Fighting with Winston Shao 1411

OriginPro实战:5步搞定碳材料拉曼光谱D峰G峰分析(附完整数据处理流程)

本文详细介绍了使用OriginPro进行碳材料拉曼光谱D峰G峰分析的完整流程,涵盖数据预处理、多图层可视化、高精度分峰拟合等关键步骤。特别针对材料科学研究中的基线漂移、多峰重叠等问题提供专业解决方案,帮助研究者快速完成从原始数据到科研级图表的全流程分析,提升碳材料表征效率与准确性。

vodka的博客 951

js实现一个弹窗div

想实现一个这样的功能,点击一个删除按钮后,在当前页面弹出一个对话框,提示确定或取消,如果点击确定,则删除成功,如果点击取消则取消删除。

baiqi123456的博客 4400

macOS 发票查验全攻略:从证书导入到Safari调试

本文详细介绍了在macOS上进行发票查验的全流程,包括证书下载、钥匙串访问导入、Safari浏览器调试等关键步骤。重点解决了验证码不显示等常见问题,提供了证书信任设置和开发者工具使用的实用技巧,帮助用户顺利完成税务发票在线查验。

weixin_29204749的博客 547

如何用 Claude Code 做大型项目重构与架构优化

本文介绍了如何利用Claude Code参与大型项目重构。文章指出,大型项目重构的最大难点在于理解系统结构和控制风险,而非单纯修改代码。作者提出了五步重构法:首先分析项目结构,其次梳理模块依赖关系,然后发现架构问题,接着设计分阶段重构方案,最后逐步实施。重点强调了Claude Code的核心价值在于帮助开发者理解复杂系统、分析模块依赖、发现结构问题、评估改动风险,而非仅作为代码生成工具。文章建议将Claude Code作为架构助手,通过分阶段小范围重构来降低风险,而非一次性全面重构。

sg_knight的专栏 1574

简单易用的div弹出层

showdiv .black_overlay{     display: none;     position: absolute;     top: 0%;     left: 0%;     width: 100%;     height: 100%;     background-color: gray;     z-index:1001;     -moz-op

寻找心的旅程 706

使用Python,OpenCV查找图像中的最亮点

这篇博客展示了,为什么在图像中找到最亮的点之前应用高斯模糊是至关重要的。 通过应用高斯模糊,可以将每个给定半径内的像素平均在一起。取平均值可以去除高频噪声,否则会影响cv2.minMaxLoc函数的结果。 一定要研究高斯模糊半径的恰当值。如果取值太小,将会减轻平均值的影响,而忽略了更大、更亮的区域。但是如果半径太大,将无法探测到小的明亮区域。

qq_40985985的博客 3810

js弹出层的写法实例

本文转载于:猿2048网站js弹出层的写法实例 点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置。 <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: rgba(0, 0, 0, 0....

chuluxie3918的博客 520

RK3568 HDMI输出调试:分辨率切换与EDID解析

厂商信息(Vendor ID)显示器型号(Product ID)支持的分辨率列表色彩特性音频支持情况检查项方法HPD 信号EDID 读取当前模式TMDS 时钟PHY 状态。

小灰灰的博客 1493

MIPI CSI-2

来源:公众号瓜大三哥版权归三哥所有1 MIPI简介2 MIPI CSI-2简介2.1 MIPI CSI-2 的层次结构2.2 CSI-2协议层2.3 打包/解包层2.4 ...

OpenFPGA的博客 2116

jquery点击空白处隐藏弹出层的写法

jquery点击空白处隐藏弹出层的写法 点击按钮展开弹出层以及点击关闭按钮关闭弹出层的效果,都很简单,但是展开弹出层后点击空白处也能关闭弹出层的效果,一开始对我来说却是有点难度的,研究了一下,分享给大家看看。 html代码 内容 按钮的代码 jquery代码 $(function(){ showCover(); closeCove

xj_li的博客 3238

RAP 时代的 Service Binding:把 CDS 业务服务稳稳地“插”到 OData 里

本文深入解析SAP ABAP开发中的关键对象Service Binding,阐述了如何通过三层架构(数据模型、服务定义、服务绑定)实现业务逻辑与协议分离。文章重点分析了Service Binding的核心参数配置,包括服务命名规范、协议类型选择(OData V2/V4、InA、SQL)及服务形态(UI Service与Web API),并通过实际案例说明不同选项的应用场景。同时介绍了服务版本控制机制、发布流程及Fiori预览功能,帮助开发者理解如何通过Service Binding将业务能力高效转化为可消费

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 5715

javascript弹出层

javascript简单的弹出层 window.onload=function(){ function setCss(_this,cssOption){ //设置元素样式 //判断节点类型 if(!_this||_this.nodeType===3||_this.nodeType

啊哈前端的专栏 1126

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

jquery点击按钮打开div弹出层,再次点击任意地方关闭弹出层

先上效果图 <button type="button" class="blue" id="btnSYWRW" onclick="SYWRW()" style="100px; border:none; color:white;"><span class="iconfont" style="position:relative;top:1px;"></span>&nbsp;首要污染物</button> <%--首要污染物占比饼图..

qq_22325259的博客 1186

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

jQuery点击空白处隐藏弹出层

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 Demo,效果源码:   CSS代码: * { padding: 0; margin: 0; } #btnShow{ margin:

爬虫 的博客 1万+

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

纯CSS写弹出层样式

弹出层的js比较好控制,给按钮添加点击事件,然后让弹出层显示,背景变暗并且不能点击; 样式是纯css写的 需要用到定位 position;使用position定位时需要注意定位是相对定位(reltive)还是绝对(abslute),绝对定位是继承他的父元素的。还有fixed;这个是让元素固定;不跟随滚动移动; 当然,position的属性之后还有top。bottom和left.,right;

TheFoma的专栏 9139

jquery-ui弹出层在最顶层显示

这篇帖子是看了其它人的帖子之后,偶有所创,如有建议,请点评。 一般来说,有时候可能页面的大小有限制,导致弹出层可能不是很漂亮,这时候,我们需要在最顶层显示,这样比较合理,也比较美观,废话不多说。 以下的功能是,将页面的一个div元素,在最顶层以弹出层形式显示。这个功能是个图片放大的功能。 $("img[id*='Img']").click(function(){ var u

javaloverkehui的专栏 1万+

layui弹出层显示指定的div

        不多说直接上干货: 1、layui写法: layer.open({ content: $("#type-content") ,btn: ['确定', '取消'] ,yes: function(index, layero){ //按钮【按钮一...

Edward·Che的博客 1万+

DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV

DIV布局网页的第三种方式:覆盖。DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框。 请看代码: HTML部分: XML/HTML Code复制内容到剪贴板 <bodytopmargin="0"> <divclass="main"> 网页主体内容,包含网页其他栏目 ...

denghan4400的博客 921
上一篇: css调整表格在屏幕上的位置
下一篇: Js 对小数的处理(科学计数法 , 显示精度)
ole_triangle_java
博客等级 码龄10年 82粉丝 83原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值