mirror of https://github.com/layui/layui
fix(layer): 修复 iframe 高度较大时，使用 layer.iframeAuto 可能导致 layer 顶部超出浏览器的问题 (#2839)
* fix(layer): 修复 layer.iframeAuto 在某些情况可能会超出浏览器的问题 * update code * docs(layer): 更新文档示例 * update --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>main
morning-star
GitHub
parent
58dccaada4
commit
3940c45654
|
|
@ -8,7 +8,7 @@
|
|||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var $ = layui.$;
|
||||
|
|
@ -22,7 +22,7 @@ layui.use(function(){
|
|||
type: 2,
|
||||
area: ['680px', '520px'],
|
||||
content: '/layer/test/iframe.html',
|
||||
fixed: false, // 不固定
|
||||
// fixed: false, // 不固定
|
||||
maxmin: true,
|
||||
shadeClose: true,
|
||||
btn: ['获取表单值', '取消'],
|
||||
|
|
@ -32,7 +32,7 @@ layui.use(function(){
|
|||
var iframeWin = window[layero.find('iframe')[0]['name']];
|
||||
var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
|
||||
var value = elemMark.val();
|
||||
|
||||
|
||||
if($.trim(value) === '') return elemMark.focus();
|
||||
|
||||
// 显示获得的值
|
||||
|
|
|
|||
|
|
@ -667,64 +667,10 @@ Class.pt.auto = function(index){
|
|||
// 计算坐标
|
||||
Class.pt.offset = function(){
|
||||
var that = this, config = that.config, layero = that.layero;
|
||||
var area = [layero.outerWidth(), layero.outerHeight()];
|
||||
var type = typeof config.offset === 'object';
|
||||
that.offsetTop = (win.height() - area[1])/2;
|
||||
that.offsetLeft = (win.width() - area[0])/2;
|
||||
var coords = ready.updatePosition(layero, config);
|
||||
|
||||
if(type){
|
||||
that.offsetTop = config.offset[0];
|
||||
that.offsetLeft = config.offset[1]||that.offsetLeft;
|
||||
} else if(config.offset !== 'auto'){
|
||||
|
||||
if(config.offset === 't'){ // 上
|
||||
that.offsetTop = 0;
|
||||
} else if(config.offset === 'r'){ // 右
|
||||
that.offsetLeft = win.width() - area[0];
|
||||
} else if(config.offset === 'b'){ // 下
|
||||
that.offsetTop = win.height() - area[1];
|
||||
} else if(config.offset === 'l'){ // 左
|
||||
that.offsetLeft = 0;
|
||||
} else if(config.offset === 'lt'){ // 左上
|
||||
that.offsetTop = 0;
|
||||
that.offsetLeft = 0;
|
||||
} else if(config.offset === 'lb'){ // 左下
|
||||
that.offsetTop = win.height() - area[1];
|
||||
that.offsetLeft = 0;
|
||||
} else if(config.offset === 'rt'){ // 右上
|
||||
that.offsetTop = 0;
|
||||
that.offsetLeft = win.width() - area[0];
|
||||
} else if(config.offset === 'rb'){ // 右下
|
||||
that.offsetTop = win.height() - area[1];
|
||||
that.offsetLeft = win.width() - area[0];
|
||||
} else {
|
||||
that.offsetTop = config.offset;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(!config.fixed){
|
||||
that.offsetTop = /%$/.test(that.offsetTop) ?
|
||||
win.height()*parseFloat(that.offsetTop)/100
|
||||
: parseFloat(that.offsetTop);
|
||||
that.offsetLeft = /%$/.test(that.offsetLeft) ?
|
||||
win.width()*parseFloat(that.offsetLeft)/100
|
||||
: parseFloat(that.offsetLeft);
|
||||
that.offsetTop += win.scrollTop();
|
||||
that.offsetLeft += win.scrollLeft();
|
||||
}
|
||||
|
||||
// 最小化窗口时的自适应
|
||||
if(layero.data('maxminStatus') === 'min'){
|
||||
that.offsetTop = win.height() - (layero.find(doms[1]).outerHeight() || 0);
|
||||
that.offsetLeft = layero.css('left');
|
||||
}
|
||||
|
||||
// 设置坐标
|
||||
layero.css({
|
||||
top: that.offsetTop,
|
||||
left: that.offsetLeft
|
||||
});
|
||||
that.offsetTop = coords.offsetTop;
|
||||
that.offsetLeft = coords.offsetLeft;
|
||||
};
|
||||
|
||||
// Tips
|
||||
|
|
@ -1121,6 +1067,70 @@ ready.promiseLikeResolve = function(value){
|
|||
return deferred.promise();
|
||||
}
|
||||
|
||||
ready.updatePosition = function(layero, config){
|
||||
var area = [layero.outerWidth(), layero.outerHeight()];
|
||||
var coords = {
|
||||
offsetTop: (win.height() - area[1])/2,
|
||||
offsetLeft: (win.width() - area[0])/2
|
||||
};
|
||||
|
||||
if(typeof config.offset === 'object'){
|
||||
coords.offsetTop = config.offset[0];
|
||||
coords.offsetLeft = config.offset[1] || coords.offsetLeft;
|
||||
} else if(config.offset !== 'auto'){
|
||||
|
||||
if(config.offset === 't'){ // 上
|
||||
coords.offsetTop = 0;
|
||||
} else if(config.offset === 'r'){ // 右
|
||||
coords.offsetLeft = win.width() - area[0];
|
||||
} else if(config.offset === 'b'){ // 下
|
||||
coords.offsetTop = win.height() - area[1];
|
||||
} else if(config.offset === 'l'){ // 左
|
||||
coords.offsetLeft = 0;
|
||||
} else if(config.offset === 'lt'){ // 左上
|
||||
coords.offsetTop = 0;
|
||||
coords.offsetLeft = 0;
|
||||
} else if(config.offset === 'lb'){ // 左下
|
||||
coords.offsetTop = win.height() - area[1];
|
||||
coords.offsetLeft = 0;
|
||||
} else if(config.offset === 'rt'){ // 右上
|
||||
coords.offsetTop = 0;
|
||||
coords.offsetLeft = win.width() - area[0];
|
||||
} else if(config.offset === 'rb'){ // 右下
|
||||
coords.offsetTop = win.height() - area[1];
|
||||
coords.offsetLeft = win.width() - area[0];
|
||||
} else {
|
||||
coords.offsetTop = config.offset;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(!config.fixed){
|
||||
coords.offsetTop = /%$/.test(coords.offsetTop) ?
|
||||
win.height()*parseFloat(coords.offsetTop)/100
|
||||
: parseFloat(coords.offsetTop);
|
||||
coords.offsetLeft = /%$/.test(coords.offsetLeft) ?
|
||||
win.width()*parseFloat(coords.offsetLeft)/100
|
||||
: parseFloat(coords.offsetLeft);
|
||||
coords.offsetTop += win.scrollTop();
|
||||
coords.offsetLeft += win.scrollLeft();
|
||||
}
|
||||
|
||||
// 最小化窗口时的自适应
|
||||
if(layero.data('maxminStatus') === 'min'){
|
||||
coords.offsetTop = win.height() - (layero.find(doms[1]).outerHeight() || 0);
|
||||
coords.offsetLeft = layero.css('left');
|
||||
}
|
||||
|
||||
// 设置坐标
|
||||
layero.css({
|
||||
top: coords.offsetTop,
|
||||
left: coords.offsetLeft
|
||||
});
|
||||
|
||||
return coords;
|
||||
};
|
||||
|
||||
/** 内置成员 */
|
||||
|
||||
window.layer = layer;
|
||||
|
|
@ -1140,12 +1150,19 @@ layer.getFrameIndex = function(name){
|
|||
// iframe 层自适应宽高
|
||||
layer.iframeAuto = function(index){
|
||||
if(!index) return;
|
||||
var heg = layer.getChildFrame('html', index).outerHeight();
|
||||
var layero = $('#'+ doms[0] + index);
|
||||
var titHeight = layero.find(doms[1]).outerHeight() || 0;
|
||||
var options = layero.data('config');
|
||||
var iframeHeight = layer.getChildFrame('html', index).outerHeight();
|
||||
var titleHeight = layero.find(doms[1]).outerHeight() || 0;
|
||||
var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0;
|
||||
layero.css({height: heg + titHeight + btnHeight});
|
||||
layero.find('iframe').css({height: heg});
|
||||
var maxHeight = 'maxHeight' in options ? options.maxHeight : win.height();
|
||||
if(maxHeight){
|
||||
iframeHeight = Math.min(iframeHeight, maxHeight - titleHeight - btnHeight);
|
||||
}
|
||||
layero.css({height: iframeHeight + titleHeight + btnHeight});
|
||||
layero.find('iframe').css({height: iframeHeight});
|
||||
|
||||
ready.updatePosition(layero, options);
|
||||
};
|
||||
|
||||
// 重置 iframe url
|
||||
|
|
|
|||
Loading…
Reference in New Issue