时间戳

首页 > 解决方案 > 在 jQuery 对话框中使用响应式 iframe

javascript - 在 jQuery 对话框中使用响应式 iframe

问题描述

所以我试图在对话框内部添加一个响应式 iframe..

这是我的出发点： Fiddle 1仅显示一个按钮，单击该按钮会显示一个 iframe。但是，iframe 没有响应，并且不会随页面调整大小。

使用此处的指导，我使用了一些不错的 CSS 容器样式来使 iframe 具有响应性。同样使用 iframe 类，我可以将高度设置为 120%，这会剪掉 iframe 显示的底部（我想要的）。这是小提琴2

最后，我试图将第二个 Fiddle 代码移动到 jQuery 对话框中。我可以添加 iframe，因此内容是响应式的，但是看起来 iframe 类没有被应用，您仍然可以看到 iframe 显示的底部显示在对话框中。小提琴 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%;
}

标签： javascriptjqueryhtmlcssiframe

解决方案

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

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

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

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

推荐阅读