Как установить размеры и положение нового окна?

@vlad-55 · Регистрация: 21.02.2009

Author24 — интернет-сервис помощи студентам

Новое окно создается вот таким кодом:

HTML5

<a href="#" onClick="winObj = window.open ('/my-files/st/st-clic.php', 'myWin','status=no, titlebar=no, toolbar=no, scrollbars=no, menubar=no, location=no'); winObj.focus (); return false"><img src="/88-31.gif" width="88" height="31"></a>

Но при этом оно упирается в правый край экрана и занимает его весь по вертикали.

Не пойму, как средствами CSS задать размер экрана по ширине и высоте, и разместить его по середине?

@kvant355 · 05.06.2014, 19:10

примерно так

CSS

.window {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0px 0px -150px;
}

@vlad-55 · 05.06.2014, 19:20 **[ТС]**

На результат не повлияло совершенно...

@kvant355 · 05.06.2014, 19:21

потому что я не вижу вашего кода, и просто привел пример, вам нужно вписать ваш класс

@vlad-55 · 05.06.2014, 19:32 **[ТС]**

Сообщение от kvant355

я не вижу вашего кода

В теме приведен полный код.

Что там вписать?

@kvant355 · 05.06.2014, 19:39

я скопировал целиком ваш код, сохранил в html файле, при нажатии на ссылку у меня просто создается новое окно браузера

Добавлено через 2 минуты
как я понимаю, окно создает скрипт, которого как раз и нет. Вы предоставили просто ссылку

@vlad-55 · 05.06.2014, 20:02 **[ТС]**

Сообщение от kvant355

окно создает скрипт, которого как раз и нет

Я предположил, что код окна определяет его содержимое и не повлияет на его положение.
Код скрипта st-clic.php:

PHP

echo '<table border="1" width="200" bgcolor="#FF00FF">
    <tr>
        <td>Проба</td>
    </tr>
</table>';

@kvant355 · 05.06.2014, 20:19

код для st-click.php

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    
    <style>
     .window {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0px 0px -150px;
}
    </style>
<title>Document</title>
<?php
echo '<table border="1" width="200" bgcolor="#FF00FF" class="window">
    <tr>
        <td>Проба</td>
    </tr>
</table>';
?>

@vlad-55 · 05.06.2014, 20:43 **[ТС]**

Эти изменения повлияли на положение таблицы внутри окна, но само окно осталось тем же самым - смещенным вправо и уходящим вниз за пределы экрана.

@kvant355 · 05.06.2014, 21:08

теперь я кажется понял чего вы хотите добиться
можно попробовать скриптом

Javascript

<script type="text/javascript">
var w = 600; // ширина окна
var h = 300; // высота окна
function detectSize(){
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
return [winW,winH];
}
var size=detectSize();
if(size[0] != w || size[1] != h){
var url=window.location.href;
window.open ( url, "new_window", "width = " + w + ", height = " + h);
window.close();
}
</script>

Добавлено через 3 минуты
либо попробуйте так

HTML5

1
2
3

    
 
<a href="#" onClick="winObj = window.open ('/my-files/st/st-clic.php', 'myWin','status=no, titlebar=no, toolbar=no, scrollbars=no, menubar=no, location=no, Width=500, Height=270'); winObj.focus (); return false"><img src="/88-31.gif" width="88" height="31"></a>

@vlad-55 · 05.06.2014, 21:19 **[ТС]**

Второй вариант работает - это я знал с самого начала. Но нюанс в том, что в этом случае заданы размеры в пикселях, а потому на разных мониторах окно прыгает по экрану. Собственно, по этой причине я и написал в теме, что настройки нужны средствами CSS, чтобы их можно было выразить в процентах.

Сам сайт имеет резиновую верстку и прекрасно адаптируется к монитору любой ширины. Можно ли также сбалансировать это открывающееся окно, задав его параметры в процентах?

@kvant355 · 05.06.2014, 21:29

у меня когда то тоже была такая проблема, помню что процентное число должно быть большим, примерно так попробуйте

HTML5

<a href="#" onClick="winObj = window.open ('/my-files/st/st-clic.php', 'myWin','status=no, titlebar=no, toolbar=no, scrollbars=no, menubar=no, location=no, Width=400%, Height=400%, top=150%, left=350%'); winObj.focus (); return false"><img src="/88-31.gif" width="88" height="31"></a>

@vlad-55 · 05.06.2014, 21:35 **[ТС]**

Добавление знака "%" ничего не меняет. Мне кажется, браузер в этом коде этот знак игнорирует.

То есть,

HTML5

1	Width=400, Height=400, top=150, left=350

и

HTML5

1	Width=400%, Height=400%, top=150%, left=350%

смотрится одинаково.

@newJS · 05.06.2014, 21:54

Влад у тебя нет размеров и координат окна, их нужно дописать, а потом скриптом пересчитывать и центрировать окно
это скан как есть, неправленый, тут про окна, расковыривай явные ошибки
расписаны модальные и не модальные окна

Кликните здесь для просмотра всего текста

2.5.1.Создание новых окон

Главное окно браузера создается не с помощью сценариев, а автоматически, когда

пользователь запускает браузер, а также при открытии документа с определен-

ным URL-адресом или другого файла.В HTML открыть документ в новом окне

можно с помощью атрибута TARGET тега ссылки <А H R E F =...>.Например, <А H R E F

= "http://www.rambler.ru" TARGET = "newWindow" > Rumbler</A>.

С помощью сценария можно создать любое количество окон.Для этого применя-

ется метод ореп() :

w i n d o w.o p e n ( [ п а р а м е т р ы ] )

Этому методу передаются следующие необязательные параметры :

• адрес документа, который нужно загрузить в создаваемое окно;

• имя окна (как имя переменной);

• строка описания свойств окна (features).

В строке свойств записываются пары свойство=значение , которые отделяются друг

от друга запятыми.В табл.2.2 приведен список свойств окна , передаваемых

в строке features.Значения yes и по можно заменить числовыми эквивалентами

1 и 0 соответственно.

Таблица 2.2.Свойства окна, передаваемые в строке features

Свойство Значения Описание

channel mode yes, no, l, 0 Показывает элементы управления Channel

directories yes, no, 1, 0 Включает кнопки каталога

fullscreen yes , no, 1, 0 Полностью разворачивает окно

height Число Высота окна в пикселах

left Число Положение по горизонтали относительно левого края экрана

в пикселах

location yes, no, 1, 0 Текстовое поле Address

menubar yes, no, 1, 0 Стандартные меню браузера

resizeable yes, no, 1, 0 Может ли пользователь изменять размер окна

scrollbars yes , no, 1, 0 Горизонтальная и вертикальная полосы прокрутки

status yes, no, 1, 0 Стандартная строка состояния продолжение &

-- Page 145--

142 Глава 2.Основы создания сценариев

Таблица 2.2 (продолжение)

Свойство Значения Описание

toolbar yes, no, \, 0 Включает панели инструментов браузера

top Число Положение по вертикали относительно верхнего края экрана

в пикселах

width Число Ширина окна в пикселах

Примеры

window.open("mypage.htm","NewWin" , "height=150 , width=300" )

w i n d o w.o p e n ( " m y p a g e.h t m " )

strfeatures = "top=100,left=15,width=400 , height=200 , location=no ,

menubar=no"

w i n d o w.o p e n ( " w w w.a d m i r a l.r u / ~ d u n a e v " , "Са м себ е веб-дизайнер" ,

strfeatures )

Вместо третьего параметра (строки features) можно использовать значение true.

В этом случае указанный документ загружается в уже существующее окно, вы-

тесняя предыдущий.Например, window.open("mypage.htm","NewWin" , true).

Метод window.open( ) возвращает ссылку на объект окна.Эту ссылку можно сохра-

нить в переменной, чтобы потом использовать, например при закрытии окна.

Для закрытия окна служит метод close().Однако выражения window.close() или

self.dose() закрывают главное окно, а не дополнительное, которое вы создали ме-

тодом ореп().В этом случае как раз и необходима ссылка на созданное окно.Эту

ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до

тех пор, пока главный документ загружен в браузер.Вот пример:

va r objwi n = w i n d o w.o p e n ( " m y p a g e.h t m " , " М о я страница" )

o b j w i n.c l o s e ( )

Метод window.open () открывает новое независимое окно как экземпляр браузера.

В этом случае при закрытии главного окна браузера новое окно остается откры-

тым.Независимые окна называют еще немодальными (modalless).Однако можно

создать и так называемое модальное окно.Пока открыто модальное окно, пользо-

ватель не может обратиться к другим окнам, в том числе и к главному.Так обыч-

но работают стандартные диалоговые окна.Например, окна, создаваемые метода-

ми alert(), prompt() и confirm() , являются модальными.В модальное окно можно

загрузить любой документ.

Для создания модального окна используется метод showModalDialog().Так же, как

и метод open() , он принимает в качестве параметров адрес документа (файла), имя

окна и строку свойств.Однако формат этой строки другой.В частности, парамет-

ры в строке разделяются точкой с запятой, размеры окна и координаты его верх-

него левого угла требуют указания единиц измерения (например, рх — пикселы).

Кроме того, этот метод не возвращает ссылку на объект окна, поскольку она не

нужна для модального окна.

В табл.2.3 приведен список свойств окна, созданного методом showModalDialog() ,

передаваемых в строке features.

-- Page 146--

2.5.Работа с окнами и фреймами 143

Таблица 2.3.Свойства окна, созданного методом showModalDialog()

Свойство Значения Описание

order thick, thin Размер рамки вокруг окна

(толстая/тонкая)

center yes, no (1, 0) Выравнивание окна по центру главного

dialogHeight Число + единицы измерения Высота окна

dilalogLeft Число + единицы измерения Горизонтальная координата

dialogTop Число + единицы измерения Вертикальная координата

dialogWidth Число + единицы измерения Ширина окна

font Строка таблицы стилей Стиль, определенный по умолчанию

для окна

font-family Строка таблицы стилей Вид шрифта, определенный по умолчанию

для окна

font-size Строка таблицы стилей Размер шрифта, определенный

по умолчанию для окна

font-style Строка таблицы стилей Тип шрифта, определенный по умолчанию

для окна

font-variant Строка таблицы стилей Вариант шрифта (обычный/курсив),

определенный по умолчанию для окна

font-weight Строка таблицы стилей Толщина шрифта, определенная

по умолчанию для окна

help yes , no, 1, О Включение кнопки Help в верхнюю панель

maximize yes, no, 1, 0 Включение кнопки Maximize в верхнюю

панель

minimize yes, no, 1, 0 Включение кнопки Minimize в верхнюю

панель

@vlad-55 155 / 19 / 4 Регистрация: 21.02.2009 Сообщений: 2,696
	05.06.2014, 21:19 [ТС]	11
	Второй вариант работает - это я знал с самого начала. Но нюанс в том, что в этом случае заданы размеры в пикселях, а потому на разных мониторах окно прыгает по экрану. Собственно, по этой причине я и написал в теме, что настройки нужны средствами CSS, чтобы их можно было выразить в процентах. Сам сайт имеет резиновую верстку и прекрасно адаптируется к монитору любой ширины. Можно ли также сбалансировать это открывающееся окно, задав его параметры в процентах? 0

@vlad-55 155 / 19 / 4 Регистрация: 21.02.2009 Сообщений: 2,696
	05.06.2014, 19:20 [ТС]	3
	На результат не повлияло совершенно... 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	05.06.2014, 19:21	4
	потому что я не вижу вашего кода, и просто привел пример, вам нужно вписать ваш класс 0

@vlad-55 155 / 19 / 4 Регистрация: 21.02.2009 Сообщений: 2,696
	05.06.2014, 19:32 [ТС]	5
	Сообщение от kvant355 я не вижу вашего кода В теме приведен полный код. Что там вписать? 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	05.06.2014, 19:39	6
	я скопировал целиком ваш код, сохранил в html файле, при нажатии на ссылку у меня просто создается новое окно браузера Добавлено через 2 минуты как я понимаю, окно создает скрипт, которого как раз и нет. Вы предоставили просто ссылку 0

@vlad-55 155 / 19 / 4 Регистрация: 21.02.2009 Сообщений: 2,696
	05.06.2014, 20:43 [ТС]	9
	Эти изменения повлияли на положение таблицы внутри окна, но само окно осталось тем же самым - смещенным вправо и уходящим вниз за пределы экрана. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	05.06.2014, 21:54	14
	Влад у тебя нет размеров и координат окна, их нужно дописать, а потом скриптом пересчитывать и центрировать окно это скан как есть, неправленый, тут про окна, расковыривай явные ошибки расписаны модальные и не модальные окна Кликните здесь для просмотра всего текста 2.5.1.Создание новых окон Главное окно браузера создается не с помощью сценариев, а автоматически, когда пользователь запускает браузер, а также при открытии документа с определен- ным URL-адресом или другого файла.В HTML открыть документ в новом окне можно с помощью атрибута TARGET тега ссылки <А H R E F =...>.Например, <А H R E F = "http://www.rambler.ru" TARGET = "newWindow" > Rumbler</A>. С помощью сценария можно создать любое количество окон.Для этого применя- ется метод ореп() : w i n d o w.o p e n ( [ п а р а м е т р ы ] ) Этому методу передаются следующие необязательные параметры : • адрес документа, который нужно загрузить в создаваемое окно; • имя окна (как имя переменной); • строка описания свойств окна (features). В строке свойств записываются пары свойство=значение , которые отделяются друг от друга запятыми.В табл.2.2 приведен список свойств окна , передаваемых в строке features.Значения yes и по можно заменить числовыми эквивалентами 1 и 0 соответственно. Таблица 2.2.Свойства окна, передаваемые в строке features Свойство Значения Описание channel mode yes, no, l, 0 Показывает элементы управления Channel directories yes, no, 1, 0 Включает кнопки каталога fullscreen yes , no, 1, 0 Полностью разворачивает окно height Число Высота окна в пикселах left Число Положение по горизонтали относительно левого края экрана в пикселах location yes, no, 1, 0 Текстовое поле Address menubar yes, no, 1, 0 Стандартные меню браузера resizeable yes, no, 1, 0 Может ли пользователь изменять размер окна scrollbars yes , no, 1, 0 Горизонтальная и вертикальная полосы прокрутки status yes, no, 1, 0 Стандартная строка состояния продолжение & -- Page 145-- 142 Глава 2.Основы создания сценариев Таблица 2.2 (продолжение) Свойство Значения Описание toolbar yes, no, \, 0 Включает панели инструментов браузера top Число Положение по вертикали относительно верхнего края экрана в пикселах width Число Ширина окна в пикселах Примеры window.open("mypage.htm","NewWin" , "height=150 , width=300" ) w i n d o w.o p e n ( " m y p a g e.h t m " ) strfeatures = "top=100,left=15,width=400 , height=200 , location=no , menubar=no" w i n d o w.o p e n ( " w w w.a d m i r a l.r u / ~ d u n a e v " , "Са м себ е веб-дизайнер" , strfeatures ) Вместо третьего параметра (строки features) можно использовать значение true. В этом случае указанный документ загружается в уже существующее окно, вы- тесняя предыдущий.Например, window.open("mypage.htm","NewWin" , true). Метод window.open( ) возвращает ссылку на объект окна.Эту ссылку можно сохра- нить в переменной, чтобы потом использовать, например при закрытии окна. Для закрытия окна служит метод close().Однако выражения window.close() или self.dose() закрывают главное окно, а не дополнительное, которое вы создали ме- тодом ореп().В этом случае как раз и необходима ссылка на созданное окно.Эту ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до тех пор, пока главный документ загружен в браузер.Вот пример: va r objwi n = w i n d o w.o p e n ( " m y p a g e.h t m " , " М о я страница" ) o b j w i n.c l o s e ( ) Метод window.open () открывает новое независимое окно как экземпляр браузера. В этом случае при закрытии главного окна браузера новое окно остается откры- тым.Независимые окна называют еще немодальными (modalless).Однако можно создать и так называемое модальное окно.Пока открыто модальное окно, пользо- ватель не может обратиться к другим окнам, в том числе и к главному.Так обыч- но работают стандартные диалоговые окна.Например, окна, создаваемые метода- ми alert(), prompt() и confirm() , являются модальными.В модальное окно можно загрузить любой документ. Для создания модального окна используется метод showModalDialog().Так же, как и метод open() , он принимает в качестве параметров адрес документа (файла), имя окна и строку свойств.Однако формат этой строки другой.В частности, парамет- ры в строке разделяются точкой с запятой, размеры окна и координаты его верх- него левого угла требуют указания единиц измерения (например, рх — пикселы). Кроме того, этот метод не возвращает ссылку на объект окна, поскольку она не нужна для модального окна. В табл.2.3 приведен список свойств окна, созданного методом showModalDialog() , передаваемых в строке features. -- Page 146-- 2.5.Работа с окнами и фреймами 143 Таблица 2.3.Свойства окна, созданного методом showModalDialog() Свойство Значения Описание order thick, thin Размер рамки вокруг окна (толстая/тонкая) center yes, no (1, 0) Выравнивание окна по центру главного dialogHeight Число + единицы измерения Высота окна dilalogLeft Число + единицы измерения Горизонтальная координата dialogTop Число + единицы измерения Вертикальная координата dialogWidth Число + единицы измерения Ширина окна font Строка таблицы стилей Стиль, определенный по умолчанию для окна font-family Строка таблицы стилей Вид шрифта, определенный по умолчанию для окна font-size Строка таблицы стилей Размер шрифта, определенный по умолчанию для окна font-style Строка таблицы стилей Тип шрифта, определенный по умолчанию для окна font-variant Строка таблицы стилей Вариант шрифта (обычный/курсив), определенный по умолчанию для окна font-weight Строка таблицы стилей Толщина шрифта, определенная по умолчанию для окна help yes , no, 1, О Включение кнопки Help в верхнюю панель maximize yes, no, 1, 0 Включение кнопки Maximize в верхнюю панель minimize yes, no, 1, 0 Включение кнопки Minimize в верхнюю панель 1