layui里面layer弹窗渲染layerdate,时间控件不出现,闪现问题,F12才出来

直接说解决办法吧!

排除法,首先看type类型

首先说第一种

layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});

这种基本不会出现高度问题,一般出现这种情况就是冒泡,虽然都知道冒泡

但是这里也是可能会遇到2种情况的,

1:通过按钮或者页面多个相同的class来渲染的

$('#test1').on('click', function(e){ //假设 test1 是一个按钮
  laydate.render({
    elem: '#test'
    ,show: true //直接显示
    ,closeStop: '#test1' //这里代表的意思是:点击 test1 所在元素阻止关闭事件冒泡。如果不设定,则无法弹出控件
  });
});

2:通过input来渲染的出现不出来,偶尔闪现,F12反正无缘无辜不知道点了什么出来的

这里就要注意 

layer.open({content:"内容"});

举例:

var html='
'; var contenthtml=$(html); contenthtml.find('input').eq(0).attr('value',"123456"); contenthtml.find('input').eq(1).attr('id',"aaa"); layer.open({ title:'设备安装配置信息', area: ['50%', '530px'], content: contenthtml.prop("outerHTML"),//这里content是一个普通的String success: function(layero, index){ layui.laydate.render({ elem:'#aaa'//指定元素 }); } });

这上面的实例肯定会出现渲染不出来(layer默认type:1),我们都知道第一反应冒泡。但是我页面只有一个id=”aaa“的呀

这里会出现这个问题因为你已经把html变量变为了dom结果在layer弹窗在增加一次dom

解决办法就是layeropen之前content里面内容是不能经过dom操作的

上面修改后正确代码

var html='
\n'; html+='
'; layer.open({ title:'设备安装配置信息', area: ['50%', '530px'], content: html, success: function(layero, index){ layui.laydate.render({ elem:'#aaa'//指定元素 }); } });

第二种:

type:2的就是iframe的弹窗,这种我几乎没用过,但是还是要说一下的,这种几乎没什么问题,遇到一般也是高度问题,iframe高度不是自适应高度在iframe上面加上

这种一般无非就是layerdate和弹窗刚好覆盖在input上

onload="this.height=this.contentWindow.document.documentElement.scrollHeight"

 

你可能感兴趣的:(前端)