Главная » Языки программирования

Pop up window in html

Содержание
  1. Creating pop-up windows by using HTML and JavaScript
  2. Demo
  3. About
  4. Способы создания окон PopUp
  5. Постановка задачи(ТЗ)
  6. Решение
  7. Добавление магии на Jquery
  8. Как создать всплывающие окна (pop-up) на сайте
  9. HTML
  10. CSS
  11. JavaScript
  12. Пример использования
  13. Create a Popup Window Using HTML, CSS, and JavaScript
  14. Write HTML to Structure the Content
  15. Write CSS to Add Style

Creating pop-up windows by using HTML and JavaScript

Pop-ups windows are some of the most common UI elements that we can find in websites. Sometimes it’s useful to add a pop-up to your pages. You can use it, for example, to create a contact forms (sign-up boxes), photo galleries, or for areas of your website that you might need a link containing “more information”.

In this article, you’ll see how easy it is to create a small pop-up windows, and put it on the center of screen variable to the currently selected screen resolution, by using only the HTML and JavaScript.

You can use a target=»_blank» in the tag, but this simply opens a new browser window that completely obscures the old one. This may be what you want, but at other times a small window on center of the large browser window is much better. This small window is popularly known as a pop-up. Using the HTML and JavaScript, you can create a pop-up window that appears when a user clicks a specific word, phrase, or graphic in a topic. This example is based on the JavaScript window open() method. By simply embedding a small snippet of code in your website and creating a unique link, you have complete control over the exact pixel dimensions of a link that opens in a new window.

Читайте также:  Очистка java от временных файлов

Add this javascript into the body (to the head) of your HTML document or preferably to an external javascript file:

script language="JavaScript"> /** * Open centered pop-up window * By Arthur Gareginyan (https://www.arthurgareginyan.com) * For full source code, visit https://mycyberuniverse.com * * @param URL - specifies the URL of the page to open. If no URL is specified, a new window with about:blank will be opened * @param windowName - specifies the target attribute or the name of the window (_blank, _parent, _self, _top, name) * @param windowWidth - the window width in pixels (integer) * @param windowHeight - the window height in pixels (integer) */ function popUpWindow(URL, windowName, windowWidth, windowHeight)  var centerLeft = (screen.width/2)-(windowWidth/2); var centerTop = (screen.height/2)-(windowHeight/2); var windowFeatures = 'toolbar=no, location=no, directories=no, status=no, menubar=no, titlebar=no, scrollbars=no, resizable=no, '; return window.open(URL, windowName, windowFeatures +' width='+ windowWidth +', height='+ windowHeight +', top='+ centerTop +', left='+ centerLeft); > /script>
Feature Description
directories=yes|no|1|0 Obsolete. Whether or not to add directory buttons. Default is yes. IE only
height=pixels The height of the window. Min. value is 100
left=pixels The left position of the window. Negative values not allowed
location=yes|no|1|0 Whether or not to display the address field. Opera only
menubar=yes|no|1|0 Whether or not to display the menu bar
resizable=yes|no|1|0 Whether or not the window is resizable. IE only
scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera only
status=yes|no|1|0 Whether or not to add a status bar
titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box
toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox only

Add the link to any objects that you want to act as a pop-up window.

In Adobe Muse you can use hyperlink code for objects:

javascript:popUpWindow('http://www.your-site.com','Example','700','600')

For else cases you can use one of the following hyperlinks (both are the same):

 onclick="popUpWindow('http://www.your-site.com','Example','700','600');" href="javascript:void(0);">CLICK TO OPEN POP-UP 
 href="javascript:popUpWindow('http://www.your-site.com','Example','700','600')">CLICK TO OPEN POP-UP

Note: Replace the http://www.your-site.com with your link to page. Replace the Example with name of the window ( _blank , _parent , _self , _top , name). Replace the ‘700’ and ‘600’ with needed size of the pop-up window.

Note: This function doesn’t work on a dual monitor setup.

Demo

If you want to see a working example of this code then click the following:

About

My Cyber Universe was founded in May 2013 by Arthur Gareginyan, a designer and full stack software engineer. Main goal is to be the source for anyone who wants to learn the web design, software and web development.

Subscribe

Subscribe to our Newsletter and get new posts delivered to your inbox — free!

© 2013-2022 Project by Space X-Chimp™. All rights reserved.

Источник

Способы создания окон PopUp

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

Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.

Вконтакте

Facebook

Twitter

Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.

Постановка задачи(ТЗ)

Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.

Решение

Способ 1
html
 
Sample Text
 
 
Text in Popup
css
* < font-family: Areal; >.b-container < width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; >.b-popup < width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; >.b-popup .b-popup-content
Результат:

Очень часто предлагают использовать:

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

Способ 2

Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

Html (без изменений)
 
Sample Text
 
 
Text in Popup
Css
* < font-family: Areal; >.b-container < width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; >.b-popup < width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; >.b-popup .b-popup-content
Результат аналогичный

Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.

Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

Добавление магии на Jquery

Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

Для этого необходимо подключить библиотеку JQuery и небольшой скрипт: