Popup Window

Make a Popup Window

You can create the html code for a popup window with this online tool.

Just use the form below to generate the necessary popup windows code to paste into your HTML.

This tool is good for quick one time use but if you want to have popup functionality built into your website then you should learn about the javascript code needed to create pop-up windows for your site or an even better way is to use the jQuery popup code. report this ad

Using this popup window generator script lets you control the pop-up window size and appearance, along with the option to make the pop up resizable or not.

All the necessary HTML code is generated by this tool so all you have to do is copy and paste the script. So go ahead and generate some popup window code for yourself.

I’ve added some observations about current cross browser support for pop-up windows at the bottom of the page.

Making a Popup Windows on Modern browsers

Most modern browsers will no longer let you hide the bar at the top containing the URL of your pop-up windows. This was changed for security reasons in order to let the visitor always know what site they’re on.

Chrome Problem with Scrollbars Appearing on Popup Window

It seems to me that currently Chrome will not suppress the scrollbars on your pop-up window when you set the scrollbars to «no» or «0». On Chrome, the scrollbars for the pop-up will appear when the content is larger than the pop-up size and you have set the scrollbars not to appear.

I’m guessing that this is a decision they made for accessibility reasons. Sometimes people have their fonts or what not set to appear larger for visual readability reasons and if there are no scrollbars then part of the content might be inaccessible to them.

Generally you should not hide the scrollbars but instead you should try to design the content to appear in the pop-up window for the majority of your viewers. Although it’s not a best practice to hide the scrollbars, here’s a quick fix if you really want to do this for all browsers.

//Add the following code to the HTML head of your pop-up:

Create Pop-up Windows

How to Use Javascript to Create Popup Windows

If you’re in a hurry and quickly have to create a pop-up window for a single link then use the pop-up window generator.

If you can, then use the jQuery popup code instead — it’s lot more compact and sturdy. Also jQuery does a great job of reducing the cross-browser problems that often arise when using javascript.

But if you can’t use jQuery to integrate the code for pop-up window functionality into your website then use the javascript code below.

Modern Pop-up Windows with Javascript

We’ll use a more modern approach and avoid putting the javascript code into the body of your HTML document. We will keep the html and the javascript separate which is a cleaner approach and in a practical sense will make things much easier for you to maintain going forward.

I’ve configured the code for 3 different size pop-ups but you can add more or change the existing ones easily.

Step 1: Add the css class to any link that you want to act as a pop-up

You can use popup1, popup2, or popup3 for class names as in this html link code example below:

Step 2: Add this javascript to the head or preferably to an external javascript file

Click on the code to select it all and then do your CTRL+C copy magic.

Pop-up Windows Examples

If you want to see a working example of this code then check out the Pop-up Windows Examples Page.

NOTE: I’ve only tested this on modern browsers so your results may vary on Internet Explorer 8 or any of those older browsers but they should fall back gracefully and use the href destination link if a pop-up is not generated.

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.

Creating A PopUp Window Using JS And React

Jul 22, 2019 · 6 min read

A small guide on creating the infamous “popup” window that is both a blessing and a curse for users with the help of JS and React.

Let’s Review 👓

Learning new languages and paradigms (especially within a short amount of time), can sometimes cause me to forget important information. So let’s take this moment to review critical areas to keep in mind when approaching front-end development.

1. Identifying Events: These are the points in which our users interacts with an application. Whether we are looking out for a click, a mouseover, or even a scroll, this action is referred to as our “event”.
2. Manipulating the DOM: After we’ve got our event, how are we going to change the DOM? Do we want to add or remove information? This is the point in which we actually change our DOM’s appearance.
3. Making Requests to Our Servers: Although we can solely manipulate the DOM, we want information to persist. We also want our data to reflect what we have on our DOM. Furthermore, how on Earth are we going to get information if we don’t even consider our server in the first place?

Our thought process should go somethi n g like this: When X happens, fetch Y from the server, and then put X on/off the DOM. If you’ve attended The Flatiron School, you’re well acquainted with “slapping” things on the DOM.

Our Goals 📋

Now that we’ve got an idea on how approach front-end development, we’ve got the task of making a pop-up window. I use “pop-up” because of the nature of these windows. If we follow our layout we made earlier, the flow of a pop-up should go like this:

1. When a user CLICKS somewhere on our site.
2. We want to go GET information from somewhere.
3. We want to PUT a window on our DOM/ CLOSE a window on our DOM/

For learning purpose, we’ll forgo step 2. Making a fetch request from our server is important, but getting a platform for our information to be placed on is what we’ll be covering today.

Vanilla JS 🍦

Somewhere out there, we’re going to have a user to will do an action to trigger a window to come up on there screen. Let’s look out for a “click” event on a specific button we’ve selected and add an event listener to it with a callback that will decide what we do next.

In our callback, this is where we might possibly do some fetching, but for now let’s have handleClick manipulate our DOM. Now we need to do a couple things here, we need to make our window VISIBLE so we’ll achieve this by changing the style on our window using the CSS property display and it’s values none and block . Since we also have access to our window, this is where we need to add a second event listener on our close button to achieve a full “toggle” affect on our window.

Where exactly am I grabbing these elements from. Let take a look at a simple HTML version of our window. Our pop-up will consist of two layers. I’ll be referring to the first layer as “the back layer” and it’s optional and for style purposes. It’s going to act as a transition between our app content and the newly made window. The back layer will essentially act like this:

The second layer is where your window will actually live and holds all information you want visible. The basic skeleton of your window should look something like this. I’ve also included a span tag in order for us to be able to get out of our window that we can call upon in our function!

Finally, let’s jazz up our window with some CSS so that our JS functions can actually have something to toggle. In our first layer, the key things we want to add a display set to none, a position of fixed (this tells your pop up content to fix itself according to THIS particular window), a transparent color (users need to see the previous content unless you don’t want them too?), and a z-index (the order in which elements are stacked and is subject to change) of 1.

As for our content layer, the most important property we need to add is a position of absolute. Since the closest positioned element to our window is our first layer (considering you opted for it), it positions itself according to it!

The result should work something like my example below!