在 jQuery 對話框中使用響應式 iframe

Question

所以我試圖在對話框內部添加一個響應式 iframe ..

這是我的起點： Fiddle 1僅顯示一個按鈕，單擊該按鈕會顯示 iframe。 然而，iframe 沒有響應並且不會隨頁面調整大小。

使用此處的指導，我使用了一些不錯的 CSS 容器樣式來使 iframe 響應。 同樣使用 iframe class 我可以將高度設置為 120%，這會從 iframe 顯示器的底部剪掉（我想要的）。 這是小提琴2

最后，我試圖將第二個小提琴代碼移動到 jQuery 對話框中。 I'm able to add the iframe so the content is responsive however it looks like the iframe class is not being applied and you can still see the bottom of the iframe display showing within the dialog. 小提琴 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。

除此之外，我添加了另一條 jQuery 行來顯示 iframe 因為 jQuery UI 正在應用display:none; 默認。

在 jQuery 對話框中使用響應式 iframe

問題描述

1 個解決方案

解決方案1
0 2019-11-25 15:48:08

在 jQuery 對話框中使用響應式 iframe

問題描述

1 個解決方案

解決方案1 0 2019-11-25 15:48:08

解決方案1
0 2019-11-25 15:48:08