Creating pop-up windows. PopUp - pop-up window. Creating and using pop-up windows. Opening a pop-up window

External popup windows with advertising are terrible ideas! All sane webmasters will never advise you to use them on your website. But if we're talking about about internal popup windows - this useful element which gives Additional information, warns, prevents, gives choice and much more.

What will we create?

In this tutorial we will create a simple and beautiful popup window using jquery. It will be similar to what is used on twitter. Naturally, you can give it the style you like.

What functionality will the window have?

• We want it to be centered on the site page when it is displayed.
• There should be a “close” button or something similar.
• When we click outside the block, the popup window will close automatically.
• When the window is displayed, the page should be covered in shadow so that the user can focus.

Let's start development

To implement a popup window, we will use CSS and a few lines jQuery code, and of course HTML. Please note that to implement our idea, you do not need any plugins and additional tools, everything is very simple and reliable!

Click me

Popup-box ( position: absolute; border-radius: 5px; background: #fff; display: none; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); font-family: Arial, sans-serif ; z-index: 9999999; font-size: 14px; .popup-box .close ( position: absolute; top: 0px; right: 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold ; cursor: pointer; color: #434343; font-size: 20px; .popup-box .close:hover ( color: #000; ) .popup-box h2 ( padding: 0; margin: 0; font-size: 18px; .popup-box .top ( padding: 20px; ) .popup-box .bottom ( background: #eee; border-top: 1px solid #e5e5e5; padding: 20px; border-bottom-left- radius: 5px; border-bottom-right-radius: 5px; ) #blackout ( background: rgba(0,0,0,0.3); position: absolute; top: 0; overflow: hidden; z-index: 999999; left : 0; display: none;

We will define some others CSS styles V JavaScript code. These styles require additional calculations, so it would be better to do it with using jQuery. Let's move on to the javascript code.

jQuery window popup code

To get started, connect jQuery file libraries. After that, we initialize jQuery and add the #blackout div to the body of the document. We also determine the width of the popup window.

$(document).ready(function() ( $("body").append("

Next, we create a function that centers the window. Previously we set absolute positioning in CSS, we can't use margin: 0px auto; we need to determine the width of the screen, subtract the width of the popup window from this, and divide all this by 2. The height will be the current scroll position, plus about 150px.

A little earlier we created a #blackout div, this is to cover the page content with a shadow. Now we need to make sure that this block will have the same width and height as the monitor. This is also calculated in this function.

function centerBox() ( /* define the required data */ var winWidth = $(window).width(); var winHeight = $(document).height(); var scrollPos = $(window).scrollTop(); /* Calculate the position */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = scrollPos + 150; /* Add styles to the blocks */ $(".popup-box").css(("width" : boxWidth+"px" , "left" : disWidth+"px", "top" : disHeight+"px")); $("#blackout").css(("width" : winWidth+"px", "height" : winHeight+"px") ; return false ;

This function must be run 3 times. When the user scrolls, when the user resizes the window, also initially when the page loads.

$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();

Finally, we need to set up click events. When the user clicks in an area outside the window, it should close. When the user clicks on the "X", the window should also disappear. In case of clicks inside the popup window, nothing should happen. Comments have been added to the code to make it easier to understand.

$("").click(function(e) ( /* Prevent default actions */ e.preventDefault(); e.stopPropagation(); /* Get id ( last number in the link class name) */ var name = $(this).attr("class");

var id = name;var scrollPos = $(window).scrollTop();/* Correct display of popup window, covering with shadow, preventing scrolling */ $("#popup-box-"+id).show();$("#blackout").show(); $("html,body").css("overflow", "hidden");/* Fixing a bug in Firefox */ $("html").scrollTop(scrollPos);

));

$("").click(function(e) ( /* Prevent the link from working if it is our popup window */ e.stopPropagation(); ));

$("html").click(function() ( var scrollPos = $(window).scrollTop(); /* Hide the window when clicked outside its area */ $("").hide(); $(" #blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); ));

$(".close").click(function() ( var scrollPos = $(window).scrollTop(); /* Hide the shadow and window when the user clicks on X */ $("").hide(); $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos)); ));

On this, creation

popup window on

jQuery complete!

If we talk about content and email marketing, “pattern interruption” is most effective when the reader is already committed to solving the problem and continuing the interaction (subscribing to the newsletter, making a purchase, etc.).

An example from the Made.com service. Marketers offered their visitors a free voucher worth 10 euros for a mere trifle - address Email. This was done because:

1. Everyone loves cash gifts;
2. 10 euros per constant contact by email - small price.

According to ExactTarget, email is the most preferred marketing channel for consumers, with 77% of consumers choosing email over other channels of interaction with a brand.

Perhaps pop-ups aren't so bad after all?

Chances are you hate pop-ups, and you have the right to do so. Of course, who would like to see something like this immediately after going to the landing page:

Or this:

You may not even know about the company’s field of activity, but you’re already covered up to your neck in pop-up windows. The examples above are unsuccessful: first of all, the visitor wants to learn more about the brand, and then download the “Free Guide to Traffic Generation”, “Free e-book", etc. Of course, most users hate such things and respond by refusing to further interact with the brand.

Perhaps you should cool off a bit and look at the test results. What do the numbers say? Here is the data from a split test of a popup and the “No, thanks” button on a popup offer.

Impressive? Then let's look at the results of companies that effectively use this approach.

1. Experience with pop-ups

In a typical day, the WP Beginner service receives about 70-80 new subscribers thanks to various methods lead generation. But the larger the subscription base, the more successful business, so the service’s marketers decided to experiment with pop-ups.

What was done?

A popup window was developed that appears when the user intends to leave the site. The effect was achieved thanks to cursor tracking technologies and other methods. This is what the window looked like:

What are the results?

Using a popup on key pages (not the entire site) increased registrations by 660%. That is, from 70-80 leads the service moved to 445-470 leads per day - a leap to a qualitatively new level.

The next case is from Backlinko. After adding a CTA to the landing page with an offer to subscribe to the newsletter, the conversion dropped to 1.73% - something urgently needed to be done. The company's marketers developed a popup window that appeared in front of users who decided to leave the landing page. Here's what it looked like:

Remember that conversion was about 1.7% before using the popup window? 2 days after the launch of the pop-up, the statistics changed. In just two days, the conversion rate increased from 1.73% to 4.83% - more than 2 times!

Of course, in a world where one competent test can increase conversion by 100, 300%, even 1300%, the results of this experiment look modest. However, this is not quite true.

First of all, with a large subscriber base, marketers can create content that is relevant to their audience and set up a cross-selling system. Thus, taking into account upsells and other factors, one contact brings the service an average of $15.

If popup windows bring in 15 additional subscribers per day, then daily income will increase by an average of $225, and annual income by $82,125, respectively. Not a bad income for 2 minutes of checking settings, right?

Clearly the pop-ups haters were wrong. But there are other factors: bounce rate and the impact of pop-ups on user experience. What about this?

2. How do pop-ups affect user experience and bounce rate?

One of the first thoughts when mentioning a pop-up is the increase in the number of failures, because more and more people will leave the landing page due to the fault of the pop-up window, which is absolutely logical. However, remember the examples above: WP Beginner marketers did not see the hesitation this indicator, as well as Backlinko - the number of failures did not change in both cases.

Dan Zarrella came to the same conclusion after running a series of tests on his personal landing page, finding that the presence of a pop-up window had no effect on the bounce rate. The only thing that has changed is that by removing pop-ups, Dan lost 50% of incoming leads.

3. What about user experience?

Apparently, visitors don't care. WP Beginner marketers have not received a single complaint about popup windows from their clients.

If you think about it, this makes sense. Yes, it’s unpleasant to see something like this after going to a resource using a link from Facebook:

But this is not a reason to leave the site in anger. What do you usually do in similar cases? That's right - close the popup window and continue searching for the desired content.

Moreover, proper use of pop-ups can improve the user experience, following the example of the Vero service. If you go to the main page and do not take any action within 30 seconds, you will see a box in the corner with the text: “What is stopping you from signing up for Vero right now?”

4. How to destroy usability with pop-ups?

However, you cannot embed any pop-up ad into your landing page and hope for high conversion. If a popup window does not stand out on the page, then it is at least useless.

You are about to leave the landing page, and then... Bam! Something strange happened, where did the CTA button appear in the middle of the page? In reality, this popup window was superimposed on an undarkened page, blending into the background. When you don't separate pop-ups from the rest of the page, it really ruins the user experience.

As it turns out, many marketers are wrong about pop-ups—it turns out they still work. Now you will learn how to use pop-ups on your landing page to achieve maximum effect.

5. Create effective pop-ups

Before we start creating pop-ups, let's look at their main types. There are two major types of popup windows:

1. Large windows (overlays).
2. Windows that pop up as a result of scrolling the page.

Overlays

They look like the example above. Such windows obscure the entire screen, darkening the background. The popup remains the only element on the page that is clearly visible to the user - in Lately There has been a tendency to use pop-up windows of this particular format.

Well-known marketer Dan Zarella also uses overlays with background darkening, but the window itself is much smaller than usual:

Windows that pop up as a result of scrolling the page

This type of pop-ups appears when the user scrolls to a certain stage on the page - most often this format used in blogs and it is extremely effective. After scrolling halfway through the page, you will see something like this:

Depending on the software or plugin you use, you can experiment with scroll depth—how far the user needs to go to see the popup. In addition, you can set the appearance of pop-ups based on the time spent by the user on the site.

The same requirements apply to headings, field texts and buttons on pop-up windows as to content on the CTA. After all, pop-ups are elements of a call to action, the purpose of which is to increase views/subscribers/leads.

6. Best time to show pop-ups

If we talk about testing overlays, the SumoMe service has collected the following data: to date optimal time is 5 seconds after the visitor goes to the landing page.

WhichTestWon gives different statistics. During the tests, the appearance of overlays was checked at 15, 30 and 45 seconds after the user lands, and the optimal result was shown by the first option: the appearance of the window after 15 seconds by 11% more effective option with 30 seconds, and at 50% - the option with 45 seconds after landing.

But remember - there is no ideal time for a window to appear, because tests are necessary in each specific case. This is also true for the question of the frequency of pop-ups. Simply put, statistics from other people's resources can motivate you to do your own testing, but should not be an object of imitation - test.

Today we will talk about how to create your own popup window for your website. Now this method is very popular, but most solutions for its implementation are paid. An example of a not very beautiful window (but this is just an example) inside a post...

In this post we will learn how to make a popup window like this. Simple, fast, effective, and most importantly free!

Any popup window essentially consists of two parts. The first is darkening the general background. The second is the window itself. The window, in turn, is usually divided into a title, text and a subscription form. Let's prepare the base for our window, taking into account the specified structure.

We have:
fs_popup_bg— Dimming the site;
fs_popup— The window itself;
fs_popup_head— Window title;
fs_content— The contents of the window, divided into two parts;

Now let's write the necessary styles...

Let's take a quick look at the styles of our popup window.
#fs_popup_bg- indicates that our background will be black and almost opaque (0.9), will be located on the left top corner and occupy the entire screen area. In this case, the depth of the element, or rather its elevation above other elements, will be very large (definitely greater than others).
#fs_popup- indicates that the window will be a level above the background (otherwise we would not see it). Its dimensions will be 600px by 300px with rounded corners and a red frame.
.fs_content_left, .fs_content_right- tells us that the blocks are pressed to the left (necessary for their location on the same level), they have indents and the Arial font.

Let's fill our window with content:

And let’s add our styles for a more beautiful display:

That's basically all. As can be seen from JavaScript example for a popup window, it is essentially needed in two cases:
1) Event of closing our window;
2) Event for clicking on the “Subscribe” button;
It also wouldn’t hurt to check whether this window was shown on this computer. Working with cookies is quite suitable for these purposes.

A PopUP box is a pop-up ad designed to attract web traffic or collect email addresses. Such elements are often forms of Internet advertising on the WorldWideWeb. Typically, these are new windows that open in a web browser to display advertisements. They are typically generated by JavaScript using cross-site scripting (XSS), sometimes with a secondary payload and using AdobeFlash.

A variation of PopUP are pop-up ads that open in a new browser window hidden in the active one.

History of origin

The first pop-up ads appeared on Tripod.com in the late 1990s. Ethan Zuckerman claims that he wrote the code to run ads in individual windows in response to complaints about banner ads. Subsequently, the developer repeatedly apologized for the inconvenience that his invention began to cause.

Opera was the first major browser to include pop-up blocking tools. Mozilla Browser later improved these developments by starting to block the PopUP window generated when the page loads. In the early 2000s, all major web browsers except Internet Explorer, allowed the user to almost completely remove unwanted pop-up ads. In 2004, Microsoft released Windows XP SP2, which added blocking to this browser.

Majority modern browsers come with pop-up protection tools. Third party tools usually include other features, such as ad filtering.

Popup windows

Some types of downloadable content are images, free music and others - can cause pop-ups. Additionally, they sometimes look like normal web pages and the site name will appear in the search bar. Many resources use pop-up windows to display information without interrupting what is currently open. this moment page. For example, if you filled out a form on a web page and needed additional guidance, the PopUP window would give you additional information without causing you to lose any data already entered into the form. Most pop-up ad blockers allow this type of downloading.

But be aware that some web installers, such as those used by McAfee, use a pop-up window to install the software. On many Internet browsers, pressing Ctrl keys Clicking on the link will bypass the filter.

In this case, clicking (even accidentally) on one pop-up window can lead to the opening of others.

Bypass pop-up blocker

Combination advertising banner and a popup is a "hover ad" that uses DHTML to display on screen on top of page content. WITH using JavaScript the ad can be overlaid on top of the web page in transparent layer. This advertisement can appear in almost all cases where the advertiser wants it to. Such a PopUP window script cannot be noticed in advance. For example, an advertisement may contain an AdobeFlash animation linked to the advertiser's site. It can also look like a regular window. Since the advertisement is part of the web page, it cannot be blocked using a blocker, but it can be prevented from opening using third party applications(like AdBlock and AdblockPlus) or using custom style sheets.

PopUnder

This ad is similar to a regular PopUP window, but it appears hidden behind the main browser window rather than appearing in front of it. When did pop-up ads become widespread and take over whole screen computer, many users have learned to immediately close them without looking. That's why PopUNDER appeared, which do not interfere with the user's viewing of the site's content. They typically go undetected until the main browser window is closed or minimized. Research has shown that users respond better to these ads than pop-up ads because they don't appear as intrusive.

Popular advertising technology

IN advertisement two very simple ones are involved JavaScript functions, introduced in 1997 with the Netscape 2.0B3 browser. This methodology is widely used on the Internet. Modern web publishers and advertisers use it to create a window in front of page content, load an ad, and then send it off the screen.

Most modern browsers only allow the PopUP popup to open when there is some user interaction (such as a mouse click). Any non-interactive calls ( callback timer, loading events, etc.) will lead to blocking of the new window. To get around this limitation, most pop-up ads are triggered using a mouse event listener attached directly to the document or document body. This allows you to capture all mouse clicks on the page that were not used by other event handlers. For example, when the user selects text, the mouse click is detected by a listener attached to the document. This will open a popup window using the above code.

"Tricky" PopUP window generator

Users of various websites and web applications constantly encounter unwanted pop-ups when using their browser. Typically, such a PopUP window is removed using the “close” or “cancel” function. Since this is a typical user response, developers began to use some tricks. So, when developing advertising messages are being created on-screen buttons or controls similar to a "close" or "cancel" option. However, when the user selects one of these options, the button performs an unexpected or unauthorized action (for example, opening a new pop-up window or downloading an unwanted file to the user's system).

Because web design technologies allow authors to use any form of “fake”, some users refuse to click or interact with any element inside a pop-up window at all.

URL redirect

Sometimes URLs are redirected to advertising pages using the Background URL redirection function. They sometimes open in a new tab, and then the contents of the old background tab are replaced with advertising pages using a redirect. AdblockPlus, uBlock or NoScript cannot block these pop-up redirects. This feature is increasingly being used by advertising distributors in search of a way to make the PopUP window the most active.

How to get rid of pop-ups

How to remove ads in the browser? First of all, check for updates. Keeping your browser up to date will go a long way in combating pop-ups. Most browsers are set to update automatically, but this can be turned off. This process usually takes only a few minutes.

• Firefox: Click the app name button in the top left corner. Hover your mouse over Help and select About Firefox. This will open a window with browser version information. If your browser does not automatically download and install.
• Chrome: Click the menu button in the top right corner. Select "About Chrome" at the bottom, it will open new inset, and the browser will check for updates. If there are any, they will be installed automatically.
• Internet Explorer: The update method depends on the browser version you are using. For older options you will need to login Center Windows updates. For Internet Explorer 10 and 11 you can enable automatic updates by clicking the Gear icon and selecting About Internet Explorer.

If updates don't help

Sometimes a PopUP window for a website and the like software embedded too deeply to be removed by updating. In such cases, reinstalling or changing your web browser may help resolve the issue.

First download latest version browser you want to use. You can find download links at home page each application.