layui弹出层第一次打开不居中

layui弹出层第一次打开不居中解决方法

使用layui的弹出层时,每次刷新后第一次弹出都会出现最左侧(默认状态的auto水平锤子居中状态)。第二次及以后弹出才回居中。

layui.use("layer",function(){
	var layer = layui.layer;
	layer.prompt({
		value: 'E:\\文档\\新建文件夹',
		title: '请输入上传项目文件的根目录'
	}, function(value, index, elem){
		var paraMap = new HashMap();
		doCallAjax.doAsynchronousAjax("", "", paraMap, doDataSynSuccess);

		function doDataSynSuccess(result) {
			tips.hide();
			if (result["status"] == "200") {
				tips.show("上传完成!");
				projectStatisticsModule.show();
			} else {
				tips.show("上次失败," + result["message"]);
			}
		}
		layer.close(index);
	});
})

结果第一次弹出时效果:
在这里插入图片描述

解决方法

在弹框方法外面套层layer.ready方法

layer.ready(function () {
	// 弹框代码
})

在这里插入图片描述

最终代码

layui.use("layer",function(){
	var layer = layui.layer;
	layer.ready(function () {
		layer.prompt({
			value: 'E:\\文档\\新建文件夹',
			title: '请输入上传项目文件的根目录',

		}, function(value, index, elem){
			var paraMap = new HashMap();
			tips.show("开始上传。。");
			doCallAjax.doAsynchronousAjax("", "", paraMap, doDataSynSuccess);

			function doDataSynSuccess(result) {
				tips.hide();
				if (result["status"] == "200") {
					tips.show("上传完成!");
					projectStatisticsModule.show();
				} else {
					tips.show("上次失败," + result["message"]);
				}
			}
			layer.close(index);
		});
	})
})

完成效果:每次刷新后第一次打开也能正确的居中了
在这里插入图片描述

-----种一棵树最好的时间是十年前,其次是现在。。
Layui是一个经典的前端UI框架,其中的弹出(layer)组件用于实现各种形式的弹窗效果。自定义弹出,主要指的是通过配置参数来改变弹出的样式、行为和内容,以满足特定的页面交互需求。 自定义Layui弹出通常包括以下几方面: 1. 定义弹出的类型:Layui支持多种弹出类型,如信息提示框(layer.msg)、确认对话框(layer.confirm)、加载(layer.load)等。 2. 设置弹出的位置:可以通过配置参数来指定弹出显示的位置,比如顶部、底部、居中显示等。 3. 调整弹出的样式:Layui允许通过参数自定义弹出的背景颜色、边框、阴影等视觉效果,以及动画效果。 4. 修改弹出的标题和内容:可以自定义弹出的标题文本和内容文本,甚至可以使用HTML标签来丰富内容的表现形式。 5. 设定按钮及回调函数:用户可以通过配置来定义弹出中的按钮,如确定、取消等,并绑定相应的回调函数。 下面是一个简单的示例代码,展示如何使用Layui创建一个自定义的弹出: ```javascript layer.open({ type: 1, // 弹出类型:1-信息框 title: '自定义标题', // 弹出的标题 content: '<p>这是自定义内容</p>', // 弹出的内容 area: ['300px', '200px'], // 宽度和高度 shade: 0.6, // 遮罩的透明度 btn: ['确认', '取消'], // 按钮数组 yes: function(index, layero){ // 确定按钮的回调函数 layer.close(index); }, cancel: function(index, layero){ // 取消按钮的回调函数 layer.close(index); } }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值