Исходный код файла jq.php:
<?php
#################################################################################################### |defaults|
# jq.php: сделано 30 декабря с 15:10 до 15:40
error_reporting(E_ALL);
@ini_set('display_errors', 'On');
mb_internal_encoding('UTF-8');
mb_http_output('UTF-8');
mb_regex_encoding('UTF-8');
mb_detect_order('UTF-8,ASCII');
mb_language('uni');
date_default_timezone_set('Europe/Moscow');
#################################################################################################### |javascript|
$script = <<<ZZZ
<script>
var
src1 = 'http://funpay.2b.su/jq-load-1.php',
src2 = 'http://funpay.2b.su/jq-load-2.php',
ML = '#modalLoader', // Modal Loader ID
MH = '#modalLabel', // Modal Header ID
MB = '#modalBody'; // Modal Body ID
$(()=>{
$('#btn1').click(()=>{
cl('Button #1 click event fired');
f_loadPageToModal(src1);
});
$('#btn2').click(()=>{
cl('Button #2 click event fired');
f_loadPageToModal(src2);
});
});
// Open modal window for url
function f_loadPageToModal(url) {
//cl('Function f_loadPageToModal(url) with url = "'+ url +'" called');
//cl('Set default modal dialog..');
$(MH).text('Загрузка '+ url +'..');
$(MB).html('Загрузка..');
//cl('Open BS modal with '+ ML +' id'); // http://getbootstrap.com/javascript/#modals-events
$(ML).modal({});
cl('jQuery.get(url) started');
$.get(url)
.done((d)=>{
$(MH).text('Загружена страница '+ url);
$(MB).html(d);
})
.fail((xhr, status, err)=>{
alert('Беда и тд');
});
}
// Debug console
function cl(v) {
console.log(v);
}
</script>
ZZZ;
#################################################################################################### |html asm|
# Out html
echo <<<ZZZ
<!doctype html>
<html lang="ru">
<head>
<title>jQuery.get()+Bootstrap modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//yastatic.net/jquery/3.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
$script
</head>
<body style="font-family:sans-serif;padding:25px;">
<div>
<h1><a href="/vs.php?file=2" title="View source">jQuery.get() + Bootstrap modal</a></h1>
<p> </p>
<p><button type="button" class="btn btn-default" id="btn1">Маленькое модальное окно #1</button></p>
<p><button type="button" class="btn btn-default" id="btn2">Большое модальное окно #2</button></p>
</div>
<!-- Big modal -->
<div class="modal fade bs-example-modal-lg" id="modalLoader" tabindex="-1" role="dialog" style="overflow-y:scroll">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabel">Загрузка данных...</h4>
</div>
<div class="modal-body" id="modalBody">
Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
ZZZ;