在 jQuery 对话框中使用响应式 iframe答案

【问题标题】：Using responsive iframe within jQuery dialog box在 jQuery 对话框中使用响应式 iframe
【发布时间】：2019-11-08 19:53:21
【问题描述】：

所以我正在尝试在对话框内部添加一个响应式 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%;
}

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

当 jQuery UI 创建一个对话框时，它会将对话框内容复制到 DOM 的一个单独部分中。因此，您的选择器针对父级不适用。

检查这个小提琴：http://jsfiddle.net/0h6a3epo/1/

我现在将父级用作应用 CSS 的对话框元素。

除此之外，我添加了另一个 jQuery 行来显示 iframe，因为 jQuery UI 默认应用 CSS display:none;。

【讨论】：