Как в jquery нарисовать модальное окно с highcharts?

212

14 марта 2017, 12:36

Есть сайт. Назовем его site.ru Есть график highcharts он лежит на странице site.ru/adler.php Мне нужно сделать кнопку, чтобы при нажатии на нее открывалось модальное окно с содержимым страницы site.ru/adler.php

На одной странице планируется несколько таких кнопок. Заранее спасибо, с уважением.

Answer 1

Можно воспользоваться jquery-ui.dialog, чтобы открыть вашу страницу в iframe.

$("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    height: 800 
}); 
 
$('.dialogBtn').click(function(){ 
  var url = $(this).data('url'); 
  $('#dialog iframe').attr('src', url);    
  $('#dialog h1').text($(this).data('title'));  
  $('#dialog').dialog('open'); 
});

#myIframe{ 
  height: 780px; 
}

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
</head> 
<body> 
  <div id="dialog"> 
    <h1></h1> 
    <iframe src=""></iframe> 
  </div> 
  <button class="dialogBtn"  
    data-title="Адлер" 
    data-url="https://aviareysi.ru/adler.php">Адлер</button> 
  <button class="dialogBtn"  
    data-title="StackExchange" 
    data-url="/">ruSO</button> 
</body> 
</html>