layer代码实现弹框__详解_fkwms-优快云博客

本文详细解析了使用Layer插件实现页面弹出框的方法，包括鼠标点击事件的绑定、弹窗尺寸设置、遮罩效果及关闭方式。通过具体代码示例，展示了如何通过参数传递与回调函数进行页面间的交互，以及如何自定义弹窗内的按钮样式。

———————————————————————————————————————————————————————

layer代码实现页面弹框，以及代码段所对应的含义：

// 网页中的鼠标点击事件
html=html+’<a data-authid=“18020500” style=“display:none” title=“排序” href=“javascript:;”
οnclick="fkwms.sortCourseService(’’+row.id+’’);"
style=“text-decoration:none;” class=“ml-10 f-16”>’;

// 该函数链接鼠标点击事件

fkwms.sortCourseService = function(rowId){
	if(rowId){
		fkwms.animationAlertService(fkwms.url.course.sortPage,rowId);
	}else{
		layer.alert("获取数据异常，请刷新后操作");
	}
}

// 上面的函数中传递参数，并调用该函数实现layer弹框

fkwms.animationAlertService = function(url,rowId){	  // url代表传递过来的页面url、rowId可以理解为其他的参数
	 layer.open({
	      type: 2,
	      area: ['800px', '300px'],		// 第一个参数是宽度   第二个参数是高度
	      title: '排序',							//弹出的文本框的标题
	      shade: 0.01,// 遮罩透明度
	      shadeClose:false,// 点击遮罩关闭层
	      moveType: 1,/ /拖拽风格，0是默认，1是传统拖动
	      shift: -1,// 0-6的动画形式，-1不开启
	      fix:true,// 不随滚动条滚动，一直在可视区域。
	      border:[0],
	      content:url,// 弹出的页面链接地址
	      btn:['确定','取消'],// btn1代表确定  btn2代表取消
	      btn1: function(index,layero){
	    var courseOrder = window["layui-layer-iframe"+index].getResulst(); //getResult()方法写在html页面，当点击确定按钮，执行该方法中的代码
																			获取layer‘弹出的文本框内输入的值，也即url所链接的页面中的文本值
	    	   if(!!courseOrder){
	    		   fkwms.submitCourseSort(rowId,courseOrder); // 调用页面中的其他函数，传递参数，执行ajax回调方法
		           layer.close(index); // 关闭弹框页面
	    	   }
	      }
	      
	  });
	 $('.layui-layer-btn .layui-layer-btn0').css('background','#5a98de')  // 按钮样式
	 $('.layui-layer-btn .layui-layer-btn1').css('color','#5a98de')
}