如何让含响应式iframe的jQuery Dialog实现页面响应式适配？

问题根源 #

1. 你给Dialog设置了固定的width:1400和height:900，直接锁死了容器尺寸，完全阻断了响应式缩放的可能。
2. jQuery UI Dialog会把目标div重新嵌套到它生成的.ui-dialog容器里，默认样式会干扰你原来的响应式布局。
3. hidden属性不是核心问题——Dialog打开时会自动移除这个属性，真正影响的是Dialog的固定尺寸和容器层级。

解决方案 #

1. 修改Dialog初始化配置

去掉固定宽高，改用百分比宽度+最大宽高限制，同时开启可调整尺寸，添加打开时的尺寸刷新逻辑：

$(function () {
    $("#dialog1").dialog({
        autoOpen: false,        
        width: '90%', // 用百分比自适应窗口宽度
        maxWidth: 1400, // 大屏幕下的最大宽度
        maxHeight: 900, // 大屏幕下的最大高度
        resizable: true, // 允许用户调整对话框尺寸
        position: { my: 'top', at: 'top+20' },
        open: function() {
            // 打开后强制刷新iframe的尺寸，确保响应式生效
            $(this).find('.responsive-iframe1').css('height', $(this).height());
        }
    });
    $("#opener").click(function () {
        $("#dialog1").dialog('open');
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');
        //$(".ui-dialog-titlebar").hide();
    });
});

2. 补充CSS覆盖Dialog默认样式

添加以下样式，确保Dialog容器和内部的响应式布局正常工作：

/* 覆盖jQuery Dialog的默认宽度限制 */
.ui-dialog {
    width: 90% !important;
    max-width: 1400px;
    box-sizing: border-box;
}

/* 去掉Dialog内容区的默认内边距，避免挤压iframe */
.ui-dialog-content {
    padding: 0 !important;
    height: auto !important;
}

/* 保留你原来的响应式样式 */
.container1 {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 75%;  
    box-sizing: border-box;
}

.responsive-iframe1 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

3. 优化HTML（可选）

因为Dialog的autoOpen: false已经会初始隐藏元素，hidden="hidden"可以去掉，避免不必要的属性干扰：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<div class="container1" id="dialog1">
    <iframe class="responsive-iframe1" src="https://tviot.slika-ins.co.il/negishut.html"></iframe>
</div>

原理说明 #

• 用百分比宽度替代固定值，让Dialog能随窗口宽度自动缩放，同时用maxWidth/maxHeight限制大屏幕下的尺寸，避免过度拉伸。
• 覆盖Dialog的默认内边距和高度样式，让你的.container1能完全占满Dialog内容区，保证响应式比例（padding-top:75%对应4:3的宽高比）生效。
• 打开时刷新iframe高度，因为Dialog在隐藏状态下，iframe的尺寸计算会出错，打开后强制触发一次尺寸更新，确保响应式渲染正常。

内容的提问来源于stack exchange，提问作者user20622377