Показать сообщение отдельно
  #1 (permalink)  
Старый 01.10.2014, 06:07
Новичок на форуме
Отправить личное сообщение для Nickon Посмотреть профиль Найти все сообщения от Nickon
 
Регистрация: 30.09.2014
Сообщений: 5

Верхний отступ модального окна jQuery
Ситуация следующая, у меня не получается задать верхний отступ для модального окна. Основывался на пример модального окна с 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
	//вывод таблицы
          ?>
Ответить с цитированием