JavaWeb——LayUi 弹框显示内容高度无法占满问题

最新推荐文章于 2023-12-21 21:01:11 发布

启依雨

最新推荐文章于 2023-12-21 21:01:11 发布

阅读量1.5k

点赞数

分类专栏： JavaWeb 文章标签： layui javascript 前端 web

本文链接：https://blog.csdn.net/weixin_45803109/article/details/121873329

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用jQuery监听点击事件弹出模态窗口，并确保内容区域充满整个弹窗高度。通过设置layer弹框的属性和CSS样式，实现了100%高度铺满的效果，确保没有多余的边距。内容中还涉及到表单渲染、选项初始化以及模态框的交互处理。

摘要由CSDN通过智能技术生成

效果图展示：

点击按钮弹窗事件

$("body").on('click','#addRechargeRule',function(){
		console.log("新增充值规则");
		//弹出模态框
		addRuleDailog=layer.open({
			type: 1,
	  	 	title:false,
	  	 	move:false,
		   	closeBtn:0,
	  	 	anim:2,  
	  	  	offset:'r',
	  	  	area:['750px','100%'],
	  		btnAlign: 'c',	
		   	content: $("#addRechargeRuleHtml").html(),
		   	zIndex:999,
		   	resize:false,
		   	skin:'threebtn-class',
		   	shadeClose:true,
		   	success:function(){
		   		//表单渲染，得渲染才会有效果显示出来	
		   		form.render();   	 
		   		//初始化选项框
		   		initGroups(true);
		   		//初始化选中选项卡
		   		limitGroups=[];
		   		//设定高度
		   		$(".layui-layer-content").css("height","100%");
		   		
		   		
			},
		    yes:function(index, layero){
		    	
		    }
		});
	})

使Content内容铺满height高度，不给底下留框。