Я не сумел самостоятельно составить такой код, поэтому взял в сети похожий скрипт и попытался приспособить его под эту задачу. Получилось очень много лишнего кода (json тут и вообще не нужен). Но главное - не работает вертикальная прокрутка!
Как бы этот код упростить и вставить прокрутку?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Проба</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
<link href="css/modal2.css" rel="stylesheet" type="text/css" />
<script>
function openWindow(module, id){
$('#modalContainer').modal({onShow: function (dialog) {
$.getJSON('json.php?id='+id+'&module='+module, function(data){
$.each(data, function(key, val){
$("#"+key).val(val);
});
});
}});
};
var options = {
target:"#output",
success: function(data){
if($(data).attr("id")=='success'){
$("#ActionsForm").hide('slow',function(){$("#modalContainer").css('margin-left',-$('#modalContainer').outerWidth()/2)});
}
}
};
</script>
<style type="text/css">
.scroll{
overflow-x:hidden;
overflow-y:scroll;
}
</style>
</head>
<body>
<div id="modalContainer" style="display:none;">
<div id="messageText">
<?php
echo nl2br(file_get_contents('../bitrix/admin/log.txt'));
?>
</div>
</div>
<p><a href="#" onclick="openWindow('dob_tov', '');">Просмотр логов</a></p>
Файл modal2.css
.form {
outline: none;
}
#modalOverlay {
height: 100%;
}
#modalContainer {
height: auto;
width: auto;
left: 50%;
top: 50%;
border: 1px solid blue;
}
a.modalCloseImg {
background:url(../img/x.png) no-repeat;
width: 25px;
height: 29px;
display: block;
z-index: 3200;
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
}
.err_data {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #F00;
}