layer的一种用法，自己画出弹出框样式

最新推荐文章于 2025-04-09 09:27:00 发布

ole_triangle_java

最新推荐文章于 2025-04-09 09:27:00 发布

阅读量443

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/ole_triangle_java/article/details/79194398

版权

js 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个用于导出报表类型的JavaScript弹出窗口实现方法。该弹窗提供了两种子物料类型选择及两种导出格式（Excel和PDF）供用户选择，并通过调用特定API完成报表导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**导出报表类型选择  弹出框
	*/
	function selectExportType(){
		var template = '<div style="padding:50px;">';
			template +=	'<div class="layui-input-block"><input type="radio" id="subMaterial" name="subMaterial"  value="1" > <%=title_hasSubMaterialType %>  ';
			template +=	'<input type="radio" id="subMaterial" name="subMaterial" value="2" checked> <%=title_notHasSubMaterialType %>';
			template +=	'</div>';
			template +=	'<br>';
			template +=	'<div class="layui-input-block"><input type="radio" id="excelType" name="excelType" value="excel" > <%=title_excelType %>  ';
			template +=	'<input type="radio" id="excelType"  name="excelType" value="PDF" checked> <%=title_PDFType %>';
			template +=	'</div>';
			template +=	'<br>';
			template +=	'<br>';
			template +=	'<div class="layui-input-block">';
			template +=	'<button class="layui-btn" lay-submit lay-filter="formDemo" οnclick="selectExportTypeConfirm();"><%=button_confirm%></button>';
			template +=	'</div>';
			template +=	'</div>';
		
		layer.open({
			  type: 1 //Page层类型
			  ,area: ['500px', '300px']
			  ,title: '<%=title_selectExportType %>'
			  ,closeBtn: 0 //不显示关闭按钮
			  ,shadeClose: true
			  ,shade: 0.6 //遮罩透明度
			  ,content: template
			});  
	}

	/**导出报表确定方法
	*/
	function selectExportTypeConfirm(){
		var bomMasterId = $("#hidden_bomMasterId").val();
		var subMaterial = $("input[name='subMaterial']:checked").val();
		var excelType = $("input[name='excelType']:checked").val();
		window.open(contentPath + '/productData/exportBOMList.do?bomMasterId=' + bomMasterId + '&exportType=' + excelType + '&subMaterial=' + subMaterial);
		layer.closeAll();
	}