弹窗根据屏幕尺寸大小自适应

弹窗根据尺寸大小自适应

FineReport AiC 发布于 4 天前
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
snrtuemcLv8专家互助
发布于4 天前

按钮弹出窗口js代码,看加除的字体,为关键

var w=document.body.clientWidth;//获取宽度

var h=document.body.clientHeight//获取高度

var a=_g().getWidgetByName("控件名1").getValue();

var b=_g().getWidgetByName("控件名2").getValue();

var url="/webroot/decision/view/report?viewlet=GettingStarted.cpt&op=write&a="+a+"&b="+b;

//或者这个格式 var url="${servletURL}?viewlet=GettingStarted.cpt&op=write&a="+a+"&b="+b;

var url = FR.cjkEncode(url);

//窗体

var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");

//将窗体的src属性设置为模板路径

$iframe.attr("src", url);

//窗体的属性

var o = {

    title: "对话框",    //标题

    width: w/2,         //宽度,可以换成w/2,自适应

    height: h/2,        //高度

    //closable:true,    //是否显示关闭按钮,默认true

    //confirm:true,     //是否添加确认取消按钮,默认false

    //draggable:true   //是否可拖动,默认true

};

//弹出窗体

FR.showDialog(o.title, o.width, o.height, $iframe, o);

最佳回答
0
华莉星宸Lv7资深互助
发布于4 天前
一、移动端弹窗自适应设置
  1. 调整弹窗尺寸比例

    • 在「移动端弹窗」设置面板的「弹窗大小」中,提供以下两种自适应方式:

    1. 自定义模式:支持按百分比设置弹窗宽度和高度(1-100%),例如设置宽度占屏幕70%、高度占屏幕60%1

    2. 高度自适应模式:弹窗高度根据内容自动调整,同时可设置宽度百分比

  2. 设备差异化设置

    • 支持分别定义手机端和平板端的弹窗比例,实现不同终端的自动适配

二、决策报表的特殊场景处理

针对安卓电视等大屏设备的全屏适配问题,可采用以下方案:

  1. 添加尺寸检测代码在 body 初始化后事件中添加 JavaScript 代码,实时获取屏幕尺寸:


window.addEventListener('resize', () => {

_g().getWidgetByName("A").setValue('宽 ' + window.innerWidth + ' 高 ' + window.innerHeight)

})
  1. 手动触发自适应当检测到全屏后未正确适配时,通过按钮点击触发重设尺寸:

_g().getWidgetByName('body').resize(960, 540)  // 数值替换为实际检测的屏幕尺寸
  1. 兼容性处理方案在初始化后事件添加以下代码强制刷新:


window.addEventListener('resize', () => {

if (window.innerWidth === 960 && window.innerHeight === 540) {

_g().getWidgetByName('body').resize(960, 540)

}

})

  • 3关注人数
  • 24浏览人数
  • 最后回答于:4 天前
    请选择关闭问题的原因
    确定 取消
    返回顶部