Layui 如何获取弹出框元素,如何修改样式(包含按钮,Title)

Layui 弹出框 如何修改样式

         本文是适用于 弹出框格式是采用 字符串拼接的方式;success() 函数会在弹出框加载完成之后加载,但是并不能直接通jQuery:$('.XXXXX') 获取弹出框样式里面的dom元素。可以直接通过success()的参数layero,直接获取和修改相关的dom,

    // 弹出框样式
    var addprogram = 
			"<table class='layui-table'>"+
			"<tr>"+
			"<td><input id='reproGramName' value = "+oldName+" class='layui-input' 
placeholder='*请输入方案名称' type='text' style='width: 365px;'/></td>"+
			"</tr>"+
	    "</table>";

    // 打开弹出框
    refreshprogramName = parent.layer.open({
			type: 1,
			area: ['400px','180px'], // 宽度;高度
			fix: true, //不固定
			maxmin: false,
			shade:0.4,
			id :'refreshprogramName',
			title: '修改方案名称',
			content: addprogram,
			btn:['确定','取消'],
			yes: function(index, layero){
				
			},
            // 
			success: function(layero, index){
				// 必须通过 layero 获取 弹出的表单样式
				updatePopupStyle(layero);
			}
		});


    // 修改弹出框的样式
	function updatePopupStyle(PopupLayero){
		// 按钮样式
		let but0 = PopupLayero.find('.layui-layer-btn0');
		let but1 = PopupLayero.find('.layui-layer-btn1');
		let inputTr =  PopupLayero.find('.layui-table tbody tr');
		// 弹出层弹出后执行的方法
		if(!but0.hasClass('my_popup_bottom_button')){
			but0.addClass('layui-btn layui-btn-radius my_popup_bottom_button');
			but0.css({
				"height":"28px",
				"line-height":"28px",
			})
		}
		if(!but1.hasClass('my_popup_bottom_button')){
			but1.addClass('layui-btn layui-btn-radius my_popup_bottom_button');
			but1.css({
				"height":"28px",
				"line-height":"28px",
				"background":"#FFF"
			})
			but1.hover(
				function(){
					but1.css('color','#333333')
				},function(){
					but1.css('color','#333333')
				}
			);
		}
		// 取消 tr的悬浮效果
		inputTr.hover(
			function(){
				inputTr.css('background','#FFF')
			},function(){
				inputTr.css('background','#FFF')
			}
		);
	}

 

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Layui是一个基于HTML5和CSS3技术的前端开发架,它提供了丰富的组件和工具,方便开发者快速构建和美化网页界面。其中,弹出按钮组件是Layui中常用的一种交互组件。 这个弹出组件可以在用户操作某个元素弹出一个带有按钮的弹窗,用来进行一些提示、提醒或者确认的操作。使用这个组件,可以更好地和用户进行交互,并且可以设置弹出的内容、按钮文字以及点击按钮后的回调函数。 在Layui中,使用弹出按钮组件非常简单。可以通过调用layui.layer.alert()方法来实现。该方法接收一个对象作为参数,对象中可以设置弹出的标题、内容、按钮文字和回调函数等属性。 以设置一个提示的例子来说明,以下是一个使用Layui弹出按钮组件的代码片段: layui.use('layer', function(){ var layer = layui.layer; layer.alert('这是一个示例弹出', { title: '提示', btn: ['确定'], btnAlign: 'c', yes: function(index, layero){ //点击按钮后的回调函数 layer.close(index); //关闭弹出 } }); }); 在上述代码中,首先通过layui.use()方法来加载Layui的layer模块。然后,通过layer.alert()方法来创建一个提示。其中,第一个参数是要显示的内容,第二个参数则是一个对象,用来设置弹出的属性。在这个例子中,设置了弹出的标题为"提示",按钮文字为"确定",并且定义了点击按钮后的回调函数,用来关闭弹出。 通过以上的代码,就可以在Layui中创建一个带有按钮弹出。这样,开发者可以根据自己的需求,自定义弹出的内容和功能,使用户界面更加友好和交互性更强。 ### 回答2: layui是一款基于jQuery的前端架,它提供了丰富的组件和强大的功能,包括弹出。 在layui中,我们可以利用layer模块来实现弹出按钮。 首先,我们需要引入layui的相关文件,包括layui.jslayui.css。 接下来,我们可以使用layer.open()方法来创建一个弹出。在该方法的参数中,我们可以设置弹出的标题、内容、按钮等信息。 例如,我们可以通过设置title参数来指定弹出的标题,content参数来指定弹出的内容。然后,我们可以通过设置btn参数来指定弹出按钮,如btn: ['确定', '消'],表示弹出中有一个确定按钮和一个按钮。 最后,我们可以通过layer.open()的返回值获取弹出的实例,并可以通过该实例调用相应的方法,如关闭弹出等。 综上所述,我们可以利用layui的layer模块来实现弹出按钮。通过设置参数,我们可以自定义弹出的标题、内容和按钮样式,从而实现丰富的功能。layui弹出按钮简单易用,是开发者常用的前端工具之一。 ### 回答3: layui是一个基于web的前端UI架,它提供了许多常用的页面组件和工具,其中也包括了弹出按钮。 在layui中,我们可以使用layer模块来实现弹出的效果。layer模块提供了layer.open()方法,通过该方法可以创建一个新的弹出层。在这个方法中,我们可以设置弹出层的标题、内容、按钮等属性。 例如,我们可以通过以下代码创建一个带有按钮弹出: ``` layer.open({ title: '提示', content: '这是一个弹出', btn: ['确定', '消'], yes: function(index, layero){ // 点击确定按钮的回调函数 layer.close(index); // 关闭弹出层 }, btn2: function(index, layero){ // 点击按钮的回调函数 layer.close(index); // 关闭弹出层 } }); ``` 在上述代码中,我们通过设置`title`属性来定义弹出层的标题,通过设置`content`属性来定义弹出层的内容。`btn`属性用于设置按钮的名称,这里定义了两个按钮,分别为"确定"和"消"。`yes`属性和`btn2`属性分别指定了点击确定按钮按钮后的回调函数。 当我们点击确定按钮时,会执行`yes`属性指定的回调函数,并关闭弹出层。同样地,当我们点击按钮时,会执行`btn2`属性指定的回调函数,并关闭弹出层。 通过上述代码,我们可以很方便地实现一个带有按钮弹出。这是layui架提供的一个简单示例,实际上还有更多丰富的配置选项可以使用,可以根据自己的需求进行更加详细的设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值