Question

所以我试图将响应性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%;
}

Answer 1

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

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

我现在使用父级作为对话框元素，该CSS元素适用于CSS。

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

在jQuery对话框中使用自适应iframe

1 个答案: