Html href popup text

How to Open Links in a Popup Window

Popup windows are not always desirable and are most likely frowned upon by many due to it being infamous for being used to open advertisements. However there may be a genuine need for opening links in a popup window in web applications. In this post, I will show how we can easily define click behavior on links to open them in a popup along with some customization options such as sizing the popup window.

Open Link in a Popup Window

Normally links get opened in the same window in which they are clicked in. In order to open them in a new window, we add target=»_blank» attribute to links. However to open the links in a separate popup window, we can make use of the onclick property and specifying a inline JavaScript code window.open as shown below.

HTML + JavaScript code for Popup

Having the popup window re-sizable and scrollable by the user is the most ideal case when you are creating popups. Not being able to resize or scroll a popup window might frustrate some users. However if you have a specific use case where you want to disable scrolling as well as resizing on the popup window then read on to do these customizations.

Customizing Popup Window

In the most basic form as we saw above, the popup window will allow users to resize, scroll and change the address of it. In certain cases, you may want to disallow such actions on the popup window. In order to achieve that, we need to pass on additional parameters to the window.open method. These additional parameters that can be used are as follows:

location , menubar , resizable , scrollbars , status , titlebar and toolbar (source)

Note that not all of these parameters are supported by all the browsers and therefore you may not have a uniform behavior if you specify them. For e.g. lets see a use-case below

Disable resizing and scrolling in popup window

To disable resizing and scrolling in the popup window, specify resizable=no and scrollbars=no .

 href="http://kanishkkunal.com" target="popup" onclick="window.open('http://kanishkkunal.com','popup','width=600,height=600,scrollbars=no,resizable=no'); return false;"> Open Link in Popup 

You will find that disabling the resizing of popup window is only supported in Internet Explorer and will not work in Chrome or Firefox. Additionally, hiding the scrollbar will work in Internet Explorer (IE), Firefox and Opera but not in Chrome.

Open Link in New Window vs Popup Window

Before you go all crazy with popup windows, do take a moment to decide whether you really want to adopt the popup behavior vs opening links in a new window. A link can be opened in a new window (or in a new tab) by simple adding the target=»_blank» attribute to links like shown below. These kinds of links are never blocked by the popup blocker while opening.

 href="http://kanishkkunal.com/" target="_blank">Open in a New Window 

To conclude, I would restate that unless you have a very specific reason, opening links in popup window should be avoided as much as possible. But when you really have the need to do it, open just one link at a time and disable the default link behavior in order to avoid popup blockers and to give better experience to the user.

Источник

Способы создания окон 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 и небольшой скрипт: