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

Введение

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

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

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

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

Вконтакте

Facebook

Twitter

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

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

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

Решение

Способ 1

Результат:

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

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

Способ 2

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

Html (без изменений)

Результат аналогичный

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

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

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

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

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

Также необходимо обновить Html:

Результат

Теперь при загрузке страницы всплывающее окно PopUp скроется.

Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.

Pop-up blocker settings, exceptions and troubleshooting

This document explains all of the settings available in Mozilla Firefox for controlling pop-ups.

Table of Contents

What are pop-ups?

Pop-up windows, or pop-ups, are windows that appear automatically without your permission. They vary in size but usually don’t cover the whole screen. Some pop-ups open on top of the current Firefox window, while others appear underneath Firefox (pop-unders).

Firefox allows you to control both pop-ups and pop-unders in Firefox Options Preferences Settings Preferences . Pop-up blocking is turned on by default, so you don’t have to worry about enabling it to prevent pop-ups from appearing in Firefox.

When blocking a pop-up, Firefox displays an information bar (if it hasn’t been previously dismissed – see below), as well as an icon in the address bar.

When you click either the Options Preferences Settings Preferences button in the info bar or the icon in the address bar, a menu is displayed with the following choices:

• Allow/Block pop-ups for this site
• Edit Pop-up Blocker Options Preferences …
• Don’t show this message when pop-ups are blocked
• (show the blocked pop-up)

Pop-up blocker settings

To access the pop-up blocker settings:

1. In the Menu bar at the top of the screen, click Firefox and select Preferences . Click the menu button and select Options . Preferences . Settings .
2. Select the Privacy & Security panel.

• Under the Permissions section, uncheck the box next to Block pop-up windows to disable the pop-up blocker altogether.
• A click on Exceptions… opens a dialog box with a list of sites that you want to allow to display pop-ups.
• The dialog box offers you the following choices:
  

Allow: Click this to add a website to the exceptions list. Remove Website: Click this to remove a website from the exceptions list. Remove All Websites: Click this to remove all of the websites in the exceptions list.

Pop-ups not being blocked

Is the pop-up coming from Firefox?

The pop-up may not actually be coming from Firefox. You can determine where the pop-up is coming from by the appearance of the window.

• If you see the address bar with the Site Info button the Tracking Protection button and the Site Identity button (a shield and a padlock) in the pop-up window, the pop-up is coming from Firefox.
• If you don’t see the button these buttons , you may have malware on your computer that causes the pop-ups. For help, see Troubleshoot Firefox issues caused by malware.

Is the pop-up blocker on and enabled for this site?

1. In the Menu bar at the top of the screen, click Firefox and select Preferences . Click the menu button and select Options . Preferences . Settings .
2. Select the Privacy & Security panel and go to the Permissions section.
3. Make sure the Block pop-up windows checkbox is checked.
4. To the right of Block pop-up windows, click the Exceptions… button. A dialog box will open with a list of sites that are allowed to show pop-ups.
5. If the site that’s opening pop-ups is listed here, select it and press Remove Website .
6. Click on Save Changes to update your changes.
7. Close the about:preferences page. Any changes you’ve made will automatically be saved.

Is the pop-up shown after a mouse click or a key press?

Certain events, such as clicking or pressing a key, can spawn pop-ups regardless of if the pop-up blocker is on. This is intentional, so that Firefox doesn’t block pop-ups that websites need to work.

Is it a true pop-up window?

Sometimes ads are designed to look like windows, but really aren’t. Firefox’s pop-up blocker can’t stop these ads.

Mozilla surveys

When you visit a Mozilla website, sometimes you’ll see a pop-up asking you to participate in a survey. The only third-party that Mozilla ever uses for surveys is SurveyGizmo, which has been vetted by our legal and privacy teams. The Firefox pop-up blocker doesn’t block these pop-ups.

These fine people helped write this article:

Volunteer

Grow and share your expertise with others. Answer questions and improve our knowledge base.

Pop-up Windows

Applies To: Microsoft Dynamics AX 2012 R2, Microsoft Dynamics AX 2012 Feature Pack, Microsoft Dynamics AX 2012

Many tasks in Enterprise Portal are performed in modal windows that are opened from list pages. The URL Web Menu Item used to open the page indicates whether the page is displayed in a modal window. This is the preferred way to use modal windows in Enterprise Portal for Microsoft Dynamics AX 2012.

In Microsoft Dynamics AX 2009, if you wanted to display information or have the user perform a task in a separate window, you had to use a pop-up window. A pop-up window is another web browser window that appears on top of the main Enterprise Portal window. Pop-up windows like this can still be used in Microsoft Dynamics AX 2012.

Parent Window

The parent window is the page in Enterprise Portal from which the pop-up window is opened. The parent window must contain a User Control that has the AxPopupParentControl component. Properties for this component allow for you to specify characteristics of the pop-up window. For example, the PopupHeight and PopupWidth properties control the size of the pop-up window.

Child Window

The child window is another page in Enterprise Portal that will be displayed in the pop-up window. It must have a URL Web Menu Item defined that points to the page. For details about how to create a web menu item, see How to: Create Web Menu Items.

The page used for the child window will typically contain a User Control that has the AxPopupChildControl component. This component is used when closing the pop-up window. It is also used when passing values from the pop-up window back to the parent window.

Opening the Pop-up Window

To open the pop-up window, use the OpenPopup method provided by the AxPopupParentControl. This method is typically called from the code for a User Control on the parent page. The OpenPopup method has one parameter, which specifies the web menu item of the page to be opened and displayed in the pop-up window.

The following example is the code for a button that was added to a User Control. The User Control contains the AxPopupParentControl component. An AxUrlMenuItem object is created that specifies the page to open in the pop-up window.

Closing the Pop-up Window

The user can close a pop-up window by clicking the close box. The pop-up window can also be closed through code for a User Control in the pop-up window. The AxPopupChildControl provides the ClosePopup method. This method requires two boolean parameters. The first specifies whether field values must be passed from the pop-up window back to the parent. The second parameter specifies whether the parent page has to post back after the pop-up window closes.

If the second parameter of the ClosePopup method is set to true, the PopupClosed event for the AxPopupParentControl will be run when the pop-up window closes. You can use the method handler for this event to retrieve values that are passed back to the parent from the pop-up window.

Passing Values Back to the Parent Window

It is often useful to pass values from the pop-up window back to the parent window. The AxPopupParentControl and AxPopupChildControl provide a collection of AxPopupField objects for this purpose. This collection is accessed through the Fields property for the component. This property provides access to the AxPopupField Collection Editor.

You will use the AxPopupField Collection Editor to create the collection of field values to pass from the child window back to the parent window. Each AxPopupField object in the collection has a Name property. It also has an optional Target property which maps the field to a control on the page. The names of the AxPopupField objects in the collection must be the same for both the AxPopupChildControl and the AxPopupParentControl. For instance, assume the AxPopupParentControl had the following set of AxPopupField objects defined:

The AxPopupChildControl must have AxPopupField objects that have the same names defined for its Fields collection. The names enable the fields to be matched as they are passed from the child back to the parent.

The values of the AxPopupField objects can be set or retrieved automatically. They can also be set or retrieved manually through code for the User Control.

Automatically Setting and Retrieving Values

If you have set the Target property for an AxPopupField object for the AxPopupChildControl, it is mapped to a field for the User Control. In the pop-up window, Enterprise Portal will automatically set the AxPopupField object value to the value that is contained in the field specified by the Target property. If you have set the Target property for the AxPopupField object for the AxPopupParentControl, the value passed back for this field from the pop-up window will automatically be retrieved and put in the mapped field.

The field specified by the Target property must be within the same naming container as the User Control, or any parent container in the hierarchy. The field must also have the Value client-side property.

Manually Setting and Retrieving Values

If you have not set the Target property for the AxPopupField objects, you can set their value manually through code in the pop-up window. Use the SetFieldValue method to do this. You can also use code in the parent window to retrieve the value of each AxPopupField object. Use the GetFieldValue method to do this.

You cannot set or retrieve an AxPopupField object value through code if you have used the Target property to map it to a field.

For example, the following is code for a button that is contained in the User Control displayed in a pop-up window. When the button is clicked, the two AxPopupField objects defined in the Fields collection have their values set. Then the pop-up window is closed.

Code for the PopupClosed event on the parent window is typically used to retrieve the values passed back from the pop-up window. The following example shows the code that retrieves the values returned by the previous example.