所以我想在对话框内部添加一个响应式 iframe..
这是我的起点:Fiddle 1它只显示一个按钮，单击该按钮会显示一个 iframe。但是，iframe 没有响应，也不会随页面调整大小。
使用来自 here 的指南我使用了一些不错的 CSS 容器样式来使 iframe 响应。同样使用 iframe 类，我可以将高度设置为 120%，这会剪掉 iframe 显示的底部(我想要的)。这是 Fiddle 2
最后，我试图将第二个 Fiddle 代码移到 jQuery 对话框中。我可以添加 iframe，因此内容可以响应，但看起来 iframe 类没有被应用，您仍然可以看到 iframe 显示的底部显示在对话框中。 Fiddle 3
我需要对话框显示与 Fiddle2 相同的内容(没有 iframe 页脚的响应)
...任何想法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<title>iframe</title>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type="button" id="btn1">Button 1</button>
<div id="iFrameDiv" class="iframe-container">
<iframe style="display:none;" id="myframe1" src="https://app.powerbi.com/view?r=eyJrIjoiMjJlYTYwODktYjU2NS00ZjZiLTg1YTktNDRlZjgzNzFmN2U5IiwidCI6ImRjOWNhZGMxLTJhZTItNGM0YS04MzIwLThlOTViMDAzNGI5NiJ9" ></iframe>
</div>
</body>
</html>
$( "#myframe1" ).dialog({
autoOpen: false,
resizable: true
});
$( "#btn1" ).click(function() {
$( "#myframe1" ).dialog( "open" );
});
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 120%;
left: 0;
position: absolute;
top: 0%;
width: 100%;
}
最佳答案
当 jQuery UI 创建对话框时，它会将对话框内容复制到 DOM 的单独部分。因此，您针对父级的选择器不适用。
检查这个 fiddle :http://jsfiddle.net/0h6a3epo/1/
我现在使用父元素作为应用 CSS 的对话框元素。
除此之外，我还添加了另一行 jQuery 来显示 iframe，因为 jQuery UI 默认应用 CSS display:none;。
关于javascript - 在 jQuery 对话框中使用响应式 iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58772996/