Так что я пытаюсь добавить отзывчивый iframe внутри диалогового окна.
Вот моя отправная точка: Fiddle 1 , которая просто показывает кнопку, которая при нажатии отображает фрейм. Однако iframe не реагирует и не изменяет размер вместе со страницей.
Используя руководство здесь Я использовал несколько приятных стилевых 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%;
}