Today we will talk about how to create your own popup window for your site. Now this method is very popular, but most solutions for its implementation are paid. Not a very good example beautiful window(but this is just an example) inside the entry...
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 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.
* - This field is not active. By clicking the "Subscribe" button you agree to the use of your address for the purpose of mass mailing of advertising materials. You also bequeath your car, apartment and 10% of your income to the author of the site.
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.
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. Huge advantage this method 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 window small size, which allows you 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.
The above code is simple as hell. But just in case, since I know that my blog is read by quite a lot of beginners, I’ll sort it out 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 the 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 window
We 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.
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 property 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.
Closing a modal window
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 non-standard buttons without using images:
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 he wrote the code to run ads in separate 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 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 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 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.
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 pop-up ads became widespread and began to take up the entire computer screen, many users 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 (timer callback, load events, etc.) will result in the new window being blocked. 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 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 On-screen buttons or controls are created that resemble 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 have great importance in the fight against 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 on the main page of each application.
It's a 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 - an email address. This was done because:
Everyone loves cash gifts;
10 euros for constant contact by email is a small price to pay.
According to ExactTarget, Email is the most preferred marketing channel for customers, as 77% of consumers prefer email to other channels of interaction with the 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 “ Free Guide on 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 pop-up window the most important pages(not on the entire site) increased the number of 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 the conversion rate 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 everything more people will leave the landing page due to the pop-up window, which is absolutely logical. However, remember the examples above: WP Beginner marketers did not see any fluctuation in this indicator, nor did 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 such 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 stop by home page and you don't take any action within 30 seconds, you will see a window in the corner with the text: “What's stopping you from subscribing to 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:
Large windows (overlays).
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.
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 first option showed the optimal result: the appearance of a window after 15 seconds is 11% more effective than the option with 30 seconds, and 50% more effective than 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.
