Ситуация следующая, у меня не получается задать верхний отступ для модального окна. Основывался на пример модального окна с JQuery.
Как выглядит проблема. Посредством PHP данные из MySql базы в виде таблицы выводятся на страницу.
Далее выбираю в таблице строку(.trRow), кликаю, выпадает модальное окно поверх моей таблицы. Как я уже понял, модальное окно высчитывает вертикальный ЦЕНТР всей таблицы. Тоесть, если в таблице 6 наименований, то всё происходить как нужно и модальное окно получается по центру браузера. Если в таблице допустим 600 наименований, то при выводе на Экран, модальное окно скролит мою таблицу до 300 пункта(середины таблицы) и выводиться там. Тоесть оно как бы получается привязанным к таблице. Подскажите, как мне его отвязать от таблицы?
пробовал использовать "position: [100,100]" например, почему-то не срабатывает. Модальное окно находиться "left:0 , top: 0" и никуда не движется.
Прошу подскажите в чём проблема.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!--link rel="stylesheet" href="/resources/demos/style.css"-->
<style>
table {left: 35%;border: 1px solid black; margin: auto;}
fieldset { padding:0; border:0; margin-top:2px; }
</style>
<script type="text/javascript">
function row_select(row_id) {
var elems = document.getElementsByTagName('tr'),
length = elems.length;
for(i=0; i<length;i++)
if (elems[i].id == 'row'+row_id)
elems[i].style.backgroundColor = '0CBFCC';
else
elems[i].style.backgroundColor = 'white';
}
$(function() {
var dialog, form, x, y,
//x=$(window).width()/2;
//y=$(window).height()/2;
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 635,
width: 891,
//position: 'top',
//position: ['top', 650],
modal: true,
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
document.location.reload();
dialog.dialog( "close" );
});
$('.trRow').click(function(){
var $row = $(this).attr("id");
document.getElementById('txtRequestIndex').value = $row.replace(/row/g, "");;
dialog.dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Card data">
<form>
<fieldset>
<div id="wb_frmCard" style="position:absolute;left:0px;top:0px;width:891px;height:550px;z-index:55;">
<form name="frmCard" method="post" action="mailto:yourname@yourdomain.com" enctype="text/plain" id="frmCard">
<input type="text" id="txtRequestIndex" style="position:absolute;left:77px;top:20px;width:98px;height:22px;line-height:22px;z-index:0;" name="txtRequestIndex" value="">
<div id="wb_Text1" style="position:absolute;left:28px;top:21px;width:53px;height:19px;z-index:1;text-align:left;">
<span style="color:#000000;font-family:'Times New Roman';font-size:16px;">№ п/п: </span>
</div>
.....................
<input type="submit" id="" name="cmdExit" value="Выход" style="position:absolute;left:777px;top:51px;width:96px;height:25px;z-index:54;">
</form>
</div>
</fieldset>
</form>
</div>
<?php
//вывод таблицы
?>