layer.open方法
layer.open({
type:2, //可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title: title,
content:['url?id=' + id,'no'], // url请求地址返回页面, no->yes显示进度条
area:['650px','585px'],
btn: ['确定', '取消'],
yes: function(index, layero){
var iframeWin = window[layero.find('iframe')[0]['name']];
// view方法在弹窗中实现
// iframeWin.view();
// 关闭自身弹窗
// layer.close(index);
},
btnAlign:'c'
});父页面获取layer.open弹窗中的值
1、获取input中的值
content页面
<div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px">
<div class="input-group">
<input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"
onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" />
</div>
</div>父页面
layer.open({
type:1,
title:"选择时间",
content:' <div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px">\n' +
' <div class="input-group">\n' +
' <input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"\n' +
' onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" />\n' +
' </div>\n' +
' </div>',
area:['250px','200px'],
btn: ['确定', '取消'],
btnAlign:'c',
yes:(index,layero)=>{
var kjMonth = $('[name=kjMonth]').val();
console.log(kjMonth);
},
cancel:(index, layero)=>{}
})2、获取select中选中的值
网上看到的， 顺便记录下
content页面
<select id="groupId" name="groupId" xm-select="group">
<span th:each="info : ${groupList}">
<option th:text="${info.name}" th:value="${info.id}"></option>
</span>
</select>父页面
layer.open({
type: 2,
title: "标题",
area: ['600px', '500px'],
content: "/page/layerOpen", //请求后端返回页面地址
btn: ['提交', '取消'],
yes: function(index, layero){
//得到iframe页的窗口对象，执行iframe页的方法：
var iframeWin = window[layero.find('iframe')[0]['name']];
// 获取页面中xm-select属性为group的下拉选择框选中的值
var selectGroupData = iframeWin.layui.formSelects.value('group', 'val');
console.log(selectGroupData);
// 或
var kjMonth = $('[name=groupId]').val();
}
})layer设置显示位置
设置显示位置可以通过offset进行设置，
设置代码：
layer.open({
type: 2,
content: "content.html",
offset:"rb"
})
文章来源：https://www.toymoban.com/news/detail-629757.html
后续待更新..文章来源地址https://www.toymoban.com/news/detail-629757.html
到了这里，关于前端笔记html-layer使用 layer.open方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
