How to create a popup window. PopUp - pop-up window. Creating and using pop-up windows. What about user experience?
Known fact: Most visitors don't make a purchase on their first visit to an online store's product page or even leave a lead - but how big is that majority?
According to research by the SeeWhy company, this is the case for 99% of visitors who visit the resource for the first time. Certainly, we're talking about primarily about eCommerce sites, but the question still arises: if 99% of visitors do not buy anything on their first visit, then how to encourage them to return?
The good news is the following statistics: 75% of visitors are still willing to return later to complete the purchase.
No matter how you feel about popups, this marketing technique is still effective for attracting attention and collecting contact data (lead generation).
Simply put, using popup windows is the fastest way to return the visitor to the landing page.
Why?
This involves a persuasion technique known as “pattern interruption”—when your attention, lulled by a particular rhythm or narrative sequence, is suddenly aggressively drawn to something unexpected. You often experience this effect when watching movies, comedy shows, and even during important negotiations.
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:
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 pop windows up. 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 pop-up and the “No, thanks” button on a pop-up offer.
| Text | Number of views | Number of emails collected | Conversion rate |
| No thanks. I prefer to pay full price | 165 416 | 9928 | 6,0% |
| I'm not interested in this | 165 625 | 7961 | 4,81% |
| No thanks | 165 021 | 7616 | 4,62% |
| No | 166 072 | 7433 | 4,48% |
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 the 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:
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.
How to make a pop-up window is a question that haunts the mind of any young novice programmer. And today we will look at how to make this pop-up window. I’ll get ahead of myself a little, because what we will do will be truly very, very interesting and functional.
So, we will create a similar window that I implemented on the website of one of my customers. You can take a look. The huge advantage of this method of creating such a window is that we will not use JavaScript, but will limit ourselves exclusively to my favorite CSS3 and HTML5. This way we will kill several birds with one stone. Firstly, we will make it easier to load our site, and secondly, we will implement everything in a convenient and easy form with minimal use of code, which will allow you to independently give your pop-up window any size, color, shape. I think it's great. So let's get started.
Imagine you already have a website and you want to implement a button somewhere, for example, “registration” or “ online application" And you want the user to click on this button to see a small window that allows him to enter some data into it and then send it to the site administrator. This is the window we are going to make now.
To begin with, we will create this button, I think you can do it without much difficulty. But in the tag You must enter the following #openModal . This is what it should look like for you. Next, before the closing tag write the code below. Please note that we will use classes for decoration, and id for calling the window. Following this rule, we can create countless different pop-up windows.
X Pop-up window
This window was created by one of the most simple ways. Nothing personal, everything is simple :)
Now we need to design everything beautifully and make sure everything works as it should. Let's start decorating.
DecorModalDialog ( position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index : 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; display: none;
ModalDialog( position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right : 0 ; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; Webkit - transition : opacity 400ms ease - in ; Moz - transition : opacity 400ms ease - in ; transition: opacity 400ms ease - in; display: none; pointer - events : none ; |
The above code is simple as hell. But just in case, since I know that my blog is read by quite a lot of newcomers, I will analyze possible difficulties. So that the window would always be in one place, I gave it a fixed position. Also, so that the window stretches across the entire screen, I set the coordinates of the corners to point 0. For background the color is set to black and transparency is added, thus achieving darkness around modal window. To ensure that the window is on top of the rest of the page elements, set it to large z-index. For the smooth appearance and disappearance of our favorite modal window, and it will become like that, believe me, transition. To hide the window you need to set display V none. Property pointer-events allows you to control the interactivity (clickability) of elements.
Opening a pop-up windowWe decorated our window. But! It, you tell me, doesn’t work. Yes, I answer, it is so. Because now comes the interesting part. CSS3 introduced a pseudo-class target, a truly useful thing, whatever you say. And in our modal pop-up window there is absolutely no way without it. What does it do? This pseudo-class, if specified with some element that is defined in address bar as id, in our case it is #openModal. Then, the properties of this pseudo-class will become more important than those of the target element. I think you already understand what I want to do.
ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); )
ModalDialog: target( display: block; pointer-events: auto; ModalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border - radius : 10px ; background : #fff; background : - moz - linear - gradient (#fff, #999); background : - webkit - linear - gradient (#fff, #999); background : - o - linear - gradient (#fff, #999); |
Pseudo-class target sets DISPLAY to BLOCK and thus the window pops up. The POINTER-EVENTS property controls the activity of the link.
The DIV properties sets the width of the window, its position on the screen, and the padding to place the window in the center of the page. The remaining properties set the margins inside the page, the rounding of corners and the background of the window with gradients from white to dark gray.
When the window design is set and it opens, you need to make a button to close the window - design it and implement the functionality. Using CSS3 and HTML5 allows you to create stylish custom buttons without using images:
Close ( background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font- weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; -moz-box-shadow: 1px 3px #000; 3px #000; box-shadow: 1px 1px 3px #000; .close:hover ( background: #00d9ff; )
Close( background : #606061; |
A PopUP 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 originThe 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 windowsSome 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 more guidance, the PopUP window would give you Additional information without causing the loss of 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 blockerCombination advertising banner and a popup is a "hover ad" that uses DHTML to display on screen on top of page content. WITH using JavaScript an ad can be overlaid on top of a web page in transparent layer. This advertisement can appear in almost all cases where the advertiser wants it to appear. 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.
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.
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 behind 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.
Users of various websites and web applications constantly encounter unwanted pop-ups when using the 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.
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-upsHow 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 on the right top 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.
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.
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 content of the window, divided into two parts;
Now let's write the necessary styles...
#fs_popup_bg ( z-index:9999; left:0; top:0; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.9); ) #fs_popup ( margin: 10% 20%; position:600px; border: 5px solid #FF0000; padding: 1px 10px 10px; fs_content_left, .fs_content_right ( float: left; padding: 5px: font-size: 20px; font-family: Arial; )
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 in the upper left corner and occupy the entire area of the screen. 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 one 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:
Close In this post we will learn how to make a popup window like this. Simple, fast, effective, and most importantly free! Hurry up, enter your E-Mail and get a bunch of!*
useful information
Your Email: * - This field is not active. By clicking the "Subscribe" button you agree to the use of your address for the purposes of mass mailing
promotional materials. And you also bequeath your car, apartment and 10% of your income to the author of the site.
#fs_popup_bg ( z-index:9999999999998; left:0; top:0; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.9); ) #fs_popup ( margin: 10% 20%; z-index:99999999999; width:600px; border: 5px solid #FF0000; background: 1px 10px 10px); fs_popup_head ( text-align: right; ) .fs_popup_head a ( color: #FFF; cursor: pointer; text-decoration: underline; ) .fs_popup_head a:hover ( cursor: pointer; text-decoration: none; ) .fs_content_left, . fs_content_right ( float: left; padding: 5px: font-size: 20px; font-family: Arial; ) .fs_content_left ( width: 370px; color: #FFF; font-size: 17px; line-height: 17px; font-family : Arial; ) .fs_content_right ( width: 200px; color: #FFFF00; ) .fs_content_right small ( font-size: 7px; line-height: 7px; ) .fs_content_right input ( margin: 5px; width: 190px; color: #000 ; ) .fs_ok ( border: 1px solid #FF0000; border-radius: 10px;
height: 35px; background: #FFFF00; cursor: pointer;
color: #000;
)
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.3. Example of a jQuery modal window called from a link (from Demo)
Most likely, you have already seen a pop-up modal window on the Internet more than once - registration confirmation, warning,
{
reference Information
});
, file download and much more. In this tutorial I will offer several examples on how to create the simplest modal windows.
Creating a simple pop-up modal window Let's start looking at the code for a simple modal window that will immediately appear
jQuery code
{
$(document).ready(function()
});
You can often see that the login and registration forms are located in such windows. Let's get down to business
First, let's write the html part. We place this code in the body of your document.
Calling a modal window
Modal window text
Close
Text in a modal window.
CSS code. Either in separate css file, or in in head.
body (
font-family:verdana;
font-size:15px;
}
.link (color:#fff; text-decoration:none)
.link:hover (color:#fff; text-decoration:underline)
#mask (
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes.window (
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog (
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top(
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close(
float:right;
}
.content(
padding-top: 35px;
}
IN jQuery code Let's focus on the position of the modal window and the mask, in our case the gradual darkening of the background.
Attention! Don't forget to include the library in the head of the document!
Connecting the library from the Google website. Well, the jQuery code itself.
jQuery code
$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").hide();
});
});
