代码拉取完成,页面将自动刷新
// 在此处输入 layer 的任意代码
layer.open({
type: 1, // page 层类型
area: ['500px', '300px'],
title: 'Hello layer',
shade: 0.6, // 遮罩透明度
shadeClose: true, // 点击遮罩区域,关闭弹层
maxmin: true, // 允许全屏最小化
anim: 0, // 0-6 的动画形式,-1 不开启
content: '<form class="layui-form" lay-filter="test"><div style="padding: 32px;"><select><option value="">请选择</option<option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="BBB">选项 B</option><option value="CCC" selected>选项 C</option></select></div></form>',
success:function(){layui.form.render();}
});
选项过多,选项悬浮框超出弹框部分被遮挡了,试试调整一下z-index层级。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
success: function(layero, index){
layero.find('.layui-layer-content').css('overflow', 'visible');
}
如果用 css('overflow', 'visible') 不适用
可以用下面的代码解决
success: (layero, index, that) => {
//表单渲染
layui.form.render();
const locateSelect = (selectWarpElem) => {
let optionWarpElem = selectWarpElem.find('.layui-anim-upbit');
const selectItemElem = optionWarpElem.find('.layui-this');
let top = 0
if (selectItemElem.length > 0) {
top = selectItemElem.position().top + selectItemElem.parent().scrollTop() - selectItemElem.height();
}
optionWarpElem.scrollTop(top).css({
'position': 'fixed',
'left': selectWarpElem.offset().left,
'top': selectWarpElem.offset().top + selectWarpElem.height()
});
optionWarpElem.css({
'width': selectWarpElem.width(),
'min-width': 'auto'
});
}
const onSelectWarpElemClick = (selectWarpElem) => {
//滚动时隐藏,避免位置错乱 只监听一次
layero.find('.layui-layer-content').one('scroll', () => {
selectWarpElem.removeClass('layui-form-selected');
});
locateSelect(selectWarpElem);
};
const deepParentFind = (el, className) => {
if (el.length < 1) {
return null;
}
if (el.hasClass(className)) {
return el;
}
if (el.hasClass('layui-layer')) {
return null;
}
return deepParentFind(el.parent(), className);
}
layero.on('click', (event) => {
let selectWarpElem = deepParentFind(layero.find(event.target), 'layui-form-selected');
if (selectWarpElem != null) {
onSelectWarpElemClick(selectWarpElem);
}
});
}
登录 后才可以发表评论