Как изменить масштаб всплывающего окна

Some extensions’ popup windows don’t fit nicely into the page. If I can zoom out on the popup window, I can use it as normal, but there’s no apparent way to do this.

Example screenshot:

you can see that the popup window extends below the visible portion of the screen. There’s a button on the bottom that says «record tab» which I can’t manage to click.

My chrome build:

Version 52.0.2743.116 (64-bit)
Platform 8350.68.0 (Official Build) stable-channel orco
Firmware Google_Orco.5216.362.7

All this is with my page zoom set to 100% and font-size set to medium in the about://settings menu.

Adjusting the page zoom to 75% in about://settings fixed it for about 30 seconds but the popup soon reverted back to its original zoom level.

asked Aug 23, 2016 at 18:54

max pleanermax pleaner

25.8k9 gold badges65 silver badges116 bronze badges

The accepted answer mentions going to the extension’s options page to reset the zoom, but many extensions don’t have/need an options page.

If that is the case:

Open the popup
Right-click and «Inspect»
A «Developer Tools» window should open, and in the title bar it should say the name and path of the popup html file, like this: chrome-extension://[the extension ID, a long string of random letters]/popup.html
Open that long address in a new tab, and it should show the normal popup content. (Instead of typing out the extension id manually, it can be copy/pasted from chrome://extensions with «Developer mode» on.)
Reset the zoom there to the default 100% (ctrl+0), as most extension developers will design and test assuming 100%.

The key point here is, the zoom is global/consistent across all of the extension’s pages, including the popup, which is why zooming the «options» page works. Any page beginning within chrome-extension://[the extension ID] will have the same zoom as and affect the zoom of all the other pages.

For example, my extension’s popup has a question mark icon that navigates to a separate help.html page still within the popup, and the zoom there affects the main popup.html zoom as well.

This also applies to webpages. Zoom is maintained over all pages from the same domain. If you zoom from 125% to 150% on one stackoverflow.com question, a different stackoverflow.com question in another tab will also zoom to 150%.

answered Jun 15, 2017 at 19:54

V. RubinettiV. Rubinetti

1,20212 silver badges21 bronze badges

The zoom setting for a Chrome extension can be managed on that extension’s options page:

Right click on the extension
Click on Options
Zoom In or Out using ctrl +/-

Now, click on the extension and watch the magic!

Google Chrome saves your zoom levels on a per-site basis. When one adjusts the zoom level on an extension’s options page, that level also applies to that extension’s popups.

Source: How to prevent zooming in popup window in my Chrome Extension

answered Sep 8, 2016 at 14:20

zwlzwl

578 silver badges5 bronze badges

Depending on the extension, opening the popup HTML separately might not be feasible. I suggest setting the non-standard CSS zoom directly for the extension’s popup:

Open the extension’s popup and right-click.
Select Inspect to open the Chrome Developer Tools.
Select the html tag in the Elements tab, and add to the styles the zoom property with the desired value. To zoom out, use a value < 1 (e.g., 0.75).

answered Oct 7, 2022 at 13:58

rlayerrlayer

11 silver badge1 bronze badge

Источник

Some extensions’ popup windows don’t fit nicely into the page. If I can zoom out on the popup window, I can use it as normal, but there’s no apparent way to do this.

Example screenshot:

you can see that the popup window extends below the visible portion of the screen. There’s a button on the bottom that says «record tab» which I can’t manage to click.

My chrome build:

Version 52.0.2743.116 (64-bit)
Platform 8350.68.0 (Official Build) stable-channel orco
Firmware Google_Orco.5216.362.7

All this is with my page zoom set to 100% and font-size set to medium in the about://settings menu.

Adjusting the page zoom to 75% in about://settings fixed it for about 30 seconds but the popup soon reverted back to its original zoom level.

asked Aug 23, 2016 at 18:54

max pleanermax pleaner

25.8k9 gold badges65 silver badges116 bronze badges

The accepted answer mentions going to the extension’s options page to reset the zoom, but many extensions don’t have/need an options page.

If that is the case:

Open the popup
Right-click and «Inspect»
A «Developer Tools» window should open, and in the title bar it should say the name and path of the popup html file, like this: chrome-extension://[the extension ID, a long string of random letters]/popup.html
Open that long address in a new tab, and it should show the normal popup content. (Instead of typing out the extension id manually, it can be copy/pasted from chrome://extensions with «Developer mode» on.)
Reset the zoom there to the default 100% (ctrl+0), as most extension developers will design and test assuming 100%.

For example, my extension’s popup has a question mark icon that navigates to a separate help.html page still within the popup, and the zoom there affects the main popup.html zoom as well.

answered Jun 15, 2017 at 19:54

V. RubinettiV. Rubinetti

1,20212 silver badges21 bronze badges

The zoom setting for a Chrome extension can be managed on that extension’s options page:

Right click on the extension
Click on Options
Zoom In or Out using ctrl +/-

Now, click on the extension and watch the magic!

Google Chrome saves your zoom levels on a per-site basis. When one adjusts the zoom level on an extension’s options page, that level also applies to that extension’s popups.

Source: How to prevent zooming in popup window in my Chrome Extension

answered Sep 8, 2016 at 14:20

zwlzwl

578 silver badges5 bronze badges

Depending on the extension, opening the popup HTML separately might not be feasible. I suggest setting the non-standard CSS zoom directly for the extension’s popup:

Open the extension’s popup and right-click.
Select Inspect to open the Chrome Developer Tools.
Select the html tag in the Elements tab, and add to the styles the zoom property with the desired value. To zoom out, use a value < 1 (e.g., 0.75).

answered Oct 7, 2022 at 13:58

rlayerrlayer

11 silver badge1 bronze badge

Источник

Если вы веб-мастер, который имеет дело с галереями изображений, запишите этот умный сценарий. Это дает вам решение очень распространенной проблемы – как изменить размер всплывающего окна, чтобы оно соответствовало размерам изображения, отображаемым в нем. Скрипт работает в NS 4/5/6/7 и IE 4/5/6.

Прежде всего вам понадобится одна главная HTML-страница, которая будет содержать ссылки на полноразмерные изображения в вашей галерее:

<HTML>  <HEAD>  <TITLE>The Image Gallery</TITLE>  <script language="Javascript">  function PopupPic(sPicURL) {  window.open( "popup.htm?"+sPicURL, "",  "resizable=1,HEIGHT=200,WIDTH=200");  }  </script>  </HEAD>  <BODY bgcolor="#FFFFFF">  <a href="javascript:PopupPic('Image1.gif')">Image 1</a><br>  <a href="javascript:PopupPic('Image2.gif')">Image 2</a><br>  <a href="javascript:PopupPic('Image3.gif')">Image 3</a><br>  </BODY>  </HTML>

Давайте немного изучим приведенный выше код. У нас есть простая HTML-страница, которая содержит пару ссылок и определяет простую функцию Javascript: PopupPic() . Нажав на любую из ссылок на этой странице, вы PopupPic() функцию PopupPic() . Эта функция действительно проста: единственное, что она делает, это создает всплывающее окно браузера и загружает в него страницу popup.htm.

Хитрость заключается в том, что мы передаем URL-адрес изображения (относительно расположения веб-страницы галереи изображений) в строке запроса при создании всплывающего окна:

 window.open( "popup.htm?"+sPicURL, "",  "resizable=1,HEIGHT=200,WIDTH=200");

Теперь взгляните на код страницы popup.htm:

 <HTML>  <HEAD>  <TITLE>Fit the Pic Script</TITLE>  <script language='javascript'>    var arrTemp=self.location.href.split("?");    var picUrl = (arrTemp.length>0)?arrTemp[1]:"";    var NS = (navigator.appName=="Netscape")?true:false;       function FitPic() {        iWidth = (NS)?window.innerWidth:document.body.clientWidth;        iHeight = (NS)?window.innerHeight:document.body.clientHeight;        iWidth = document.images[0].width - iWidth;        iHeight = document.images[0].height - iHeight;        window.resizeBy(iWidth, iHeight);        self.focus();      };  </script>  </HEAD>  <BODY bgcolor="#000000" onload='FitPic();' topmargin="0"  marginheight="0" leftmargin="0" marginwidth="0">  <script language='javascript'>  document.write( "<img src='" + picUrl + "' border=0>" );  </script>  </BODY>  </HTML>

Первое, что должно привлечь наше внимание, это то, что мы используем код Javascript, который выполняется непосредственно при загрузке страницы:

 var arrTemp=self.location.href.split("?");  var picUrl = (arrTemp[1].length>0)?arrTemp[1]:"";  var NS = (navigator.appName=="Netscape")?true:false;

Сначала мы получаем строку URL-адреса страницы и разделяем ее символом « ? ». Результат этого разделения хранится в переменной массива arrTemp .

Во второй строке мы проверяем, имеет ли второй элемент нашего временного массива – arrTemp[1] – длину больше 0, и если это правда, мы присваиваем значение этого второго элемента picURL переменной picURL .

В третьей строке мы присваиваем true переменной NS, если браузер Netscape, в противном случае мы присваиваем false. Как вы, возможно, уже догадались, переменная PicURL содержит относительный URL-адрес изображения, которое будет отображаться на странице popup.htm.

После того, как у нас есть переменная PicURL , мы можем легко записать изображение в тело document.write используя document.write :

 document.write( "<img src='" + picUrl + "' border=0>" );

После полной загрузки страницы в браузер запускается событие Load , и поскольку мы используем обработчик события onLoad, FitPic() функция FitPic() . Первые 2 строки этой функции определяют ширину и высоту окна браузера (в зависимости от браузера). Следующие 3 строки, однако, являются наиболее важными в этой функции. Давайте хорошо посмотрим на них:

 iWidth = document.images[0].width - iWidth;  iHeight = document.images[0].height - iHeight;  window.resizeBy(iWidth, iHeight);

После полной загрузки страницы мы можем получить доступ к коллекции изображений документа, таким образом получая доступ к свойствам изображения. Поскольку у нас есть только одно изображение на нашей странице, и поскольку коллекция изображений начинается с нуля, изображение доступно с document.images[0] – таким образом, мы можем получить ширину и высоту изображения.

Затем мы вычитаем начальную ширину браузера из фактической ширины изображения – в результате получаем число, на которое необходимо изменить ширину браузера. Мы делаем то же самое с начальной высотой браузера и фактической высотой изображения, чтобы определить количество пикселей, на которое мы должны изменить размер браузера, чтобы соответствовать изображению.

Третья строка – это фактическое изменение размера, выполненное встроенной в resizeBy() функцией resizeBy() . Если вы не знакомы с resizeBy() , вот краткое объяснение.

По определению, эта функция изменяет размер текущего окна браузера на определенную величину. Требуется 2 параметра: window.resizeBy(X, Y):

X – количество пикселей для увеличения окна по горизонтали
Y – количество пикселей для увеличения окна по вертикали

Следующая строка уменьшает ширину окна на 10 пикселей и увеличивает его высоту на 13 пикселей:

 window.resizeBy(-10, +13);

Последняя строка в нашей функции FitPic() фокусируется на всплывающем окне.

Итак, чтобы подвести итог, как работает скрипт, мы передаем URL-адрес с изображением в popup.htm (popup.htm? Images / Image1.gif), затем записываем тег image в тело страницы с помощью document.write, и когда страница загружается, мы вызываем FitPic() , который изменяет размер окна браузера до размера изображения.

Чтобы увидеть наш скрипт в действии, нажмите здесь .

Источник

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

Пример снимка экрана:

Вы можете видеть, что всплывающее окно выходит за пределы видимой части экрана. Внизу есть кнопка с надписью «вкладка записи», которую я не могу нажать.

Моя хромированная сборка:

Version 52.0.2743.116 (64-bit)
Platform 8350.68.0 (Official Build) stable-channel orco
Firmware Google_Orco.5216.362.7

Все это при масштабировании моей страницы, установленном на 100%, и размере шрифта, установленном на средний в меню about://settings.

Настройка масштаба страницы до 75% в about://settings исправила это примерно на 30 секунд, но вскоре всплывающее окно вернулось к исходному уровню масштабирования.

2 ответа

Лучший ответ

В принятом ответе упоминается переход на страницу параметров расширения для сброса масштабирования, но многие расширения не имеют / не нуждаются в странице параметров.

Если это так:

Откройте всплывающее окно
Щелкните правой кнопкой мыши и «Осмотреть»
Должно открыться окно «Инструменты разработчика», и в строке заголовка должно быть указано имя и путь к всплывающему html-файлу, например: chrome-extension://[the extension ID, a long string of random letters]/popup.html
Откройте этот длинный адрес в новой вкладке, и он должен показать обычное всплывающее содержимое. (Вместо того, чтобы вводить идентификатор расширения вручную, его можно скопировать / вставить из chrome://extensions с включенным «Режимом разработчика».)
Сбросьте масштабирование до 100% по умолчанию (ctrl + 0), поскольку большинство разработчиков расширений будут проектировать и тестировать, принимая 100%.

Ключевой момент здесь заключается в том, что масштабирование является глобальным / постоянным для всех страниц расширения, включая всплывающее окно , поэтому масштабирование страницы «параметров» работает. Любая страница, начинающаяся в пределах chrome-extension://[the extension ID], будет иметь такой же масштаб, что и все остальные страницы, и влиять на него.

Например, во всплывающем окне моего расширения есть значок вопросительного знака, который позволяет перейти на отдельную страницу help.html, все еще находящуюся во всплывающем окне, и масштабирование там также влияет на основной масштаб popup.html.

Это также относится к веб-страницам. Масштабирование сохраняется на всех страницах одного домена. Если вы увеличите масштаб со 125% до 150% в одном вопросе stackoverflow.com, другой вопрос stackoverflow.com на другой вкладке также увеличится до 150%.

V. Rubinetti
9 Май 2018 в 22:29

Настройкой масштабирования для расширения Chrome можно управлять на странице параметров этого расширения:

Щелкните правой кнопкой мыши расширение
Нажмите на Параметры
Увеличение или уменьшение масштаба с помощью ctrl +/-

Теперь нажмите на расширение и наблюдайте за волшебством!

Google Chrome сохраняет уровни масштабирования для каждого сайта. Когда кто-то настраивает уровень масштабирования на странице параметров расширения, этот уровень также применяется к всплывающим окнам этого расширения.

Источник: Как предотвратить масштабирование во всплывающем окне в моем расширении Chrome

zwl
15 Июн 2017 в 19:50

Источник

В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна — popup’ы — для регистрации, авторизации, информационные окна, — всевозможных форм и размеров. Также существует огромное количество плагинов к тому же jQuery для простого и удобного создания таких попапов — тот же Shadowbox, например.

Внешний вид, размеры и оформление таких попапов совершенно разнообразными — с оверлеем, тенюшками, анимациями — всего не счесть. Объединяет их только, пожалуй, тот факт, что обычно они выводятся в самом центре страницы — как по горизонтали, так и по вертикали. И центрирование это производится средствами JS. Я не буду вдаваться в подробности этих расчетов, опишу их лишь вкратце:

HTML-код попапа обычно имеет такую структуру:

<div class="popup__overlay"></div>  <div class="popup">...</div>  

И CSS (здесь и ниже я умышленно буду опускать написание некоторых свойств, необходимых лишь для некоторых браузеров и их версий, оставив лишь самое основное):

.popup__overlay { position: fixed; left: 0; top: 0; background: #000; opacity: .5; filter: alpha(opacity=50); z-index: 999 } .popup { position: absolute; width: 20%; z-index: 1000; border: 1px solid #ccc; background: #fff } 

JS определяет браузер и версию браузера, и на основании этого высчитывает размеры рабочей области и размеры самого попапа (если они не заданы), а затем производятся нехитрые вычисления положения его левого верхнего угла (css-свойства left и top для .popup). Многие плагины также реагируют на изменение размеров страницы, пересчитывая всё это дело каждый раз, с тем, чтобы попап располагался точно в центре рабочей области.

Я по натуре своей перфекционист (знаю, порой это плохо), и частенько заморачиваюсь даже над мелкими деталями, пытаясь улучшить и добавить максимально возможную расширяемость этим деталям, и меня не мог не зацепить именно этот момент в работе всех этих плагинов. Возникла мысль, что всю работу по позиционированию попапа можно переложить с плеч JS на плечи самого браузера, то есть выполнять эту работу средствами CSS.

Этим и займёмся.

Ниже я приведу пример попапа, работающего во всех мажорных версиях основных браузеров. Для корректной его работы в IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Итак, у нас есть страница с кнопкой, при нажатии на которую должно всплывать модальное окно с некоторой информацией, а весь остальной контент должен затеняться оверлеем.

Для начала — HTML-код. Структура его будет немного отличаться от кода, указанного выше, почему — об этом ниже в статье; классы элементов останутся теми же:

<div class="popup__overlay"> <div class="popup"></div> </div> 

И немного CSS:

.popup__overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999 } .popup { } 

Фиксированные размеры

Самый простой вариант. Ничего нового изобретать не нужно:

.popup { left: 50%; top: 50%; width: 400px; height: 200px; margin-left: -200px; margin-top: -100px } 

Отрицательные margin’ы в половину ширины и высоты — банально и скучно, ничего оригинального в этом нет. Идём дальше.

Размеры попапа зависят от содержимого

Сперва — выравнивание по горизонтали — это вроде бы проще. Если попап фиксированной ширины — то достаточно будет следующего:

.popup { margin: auto } 

На вертикальное выравнивание это никак не повлияет, и, к слову, если вам достаточно лишь горизонтального выравнивания, то на этом можно и остановиться, указав еще какой-нибудь верхний отступ попапа. Но нам этого мало! Идём дальше.

Вертикальное выравнивание. Здесь уже становится интересно. С такой задачей, конечно, без проблем справилась бы таблица или эмуляция таблицы с помощью display: table & display: table-cell, но заставить такое работать в старых IE — себе дороже. Таблица также отпадает — по понятным причинам.

Итак, margin уже отпадает — размеров мы не знаем. Вспоминаем, что же есть из свойств с подобными эффектами. Ага, text-align. Но только для инлайновых элементов. ОК. Кажется, сам Бог велел использовать display: inline-block — блочный элемент, к которому можно было бы применить свойства для инлайновых элементов. С поддержкой этого свойства у всех браузеров тоже всё, можно сказать, в порядке. Код становится примерно таким:

.popup__overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; text-align: center } .popup { display: inline-block; vertical-align: middle } 

Остаётся вертикальное выравнивание — нам подойдёт vertical-align. В любой другой ситуации было бы также уместно использовать line-height, но поскольку у нас нет фиксированной высоты страницы (line-height в данном контексте), здесь использовать её нельзя. На помощь приходит один трюк с вертикальным выравниванием элементов неизвестных размеров. Я точно помню, что нашел этот способ на Хабре, но, к сожалению, не смог найти ссылку на тот топик. Заключается этот способ в следующем: добавляется inline-block элемент нулевой ширины и 100%-ой высоты родителя, который «расхлопывает» высоту строки до 100% высоты родителя, то есть до высоты рабочей области страницы. Сделаем это изящнее — вместо лишней разметки воспользуемся псевдоэлементами:

.popup__overlay:after { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: '' } 

Осталось добавить полупрозрачное затемнение оверлея — с этим справится rgba. Всё! Теперь положение попапа регулируется только средствами браузера на уровне CSS.

Итоговый пример

Из замеченных минусов метода — порой возникают глюки с отображением в IE 6-7, в частности, при использовании флоатов.

Повторюсь — мой метод не избавляет от использования JS вообще, он лишь частично оптимизирует скорость работы всплывающих окон за счет переноса части нагрузки с JS на CSS.

Уверен, что метод можно улучшить — как визуально, так и изнутри, и буду рад любым идеям и предложениям по этому поводу, а также замечаниям по работе и отображению в различных браузерах.

UPD: По просьбам, добавил пример, работающий в IE7+ — http://jsfiddle.net/vend3tta/SE4tS/

Источник

Приветствую!
Возникла необходимость изменить размер всплывающего окна на сайте https://mymokondo.ru/

Подскажите, как это сделать: опыта в html/php нет, а в модулях этого окна не вижу. Прилагаю скриншоты.

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

Можем рассмотреть помощь на платной основе.
Спасибо!

Вложения:
Blast
Активный пользователь

Сообщения:

140

Симпатии:

48

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

Сообщения:

140

Симпатии:

48
добавить стиль
@media (max-width: 1151.98px) { a.callbackkiller.cbk-phone.cbk-phone-fixed.cbk-phone-xs { bottom: 10rem !important; } }
вместо 10rem впишите любую устраивающую вас цифру. файл стилей у вас catalog/view/theme/default/stylesheet/main.0.1.14.min.css
он минифицирован, возможно автоматически шаблоном. в вашем случае наверное лучшим вариантом будет добавить указанный стиль в модуле SEO CMS. там есть соответствующее поле