Create a jQuery popup window. DIY floating boilies
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 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. The Mozilla browser later improved on these developments by blocking 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 eliminate unwanted pop-up ads. In 2004, Microsoft released Windows XP SP2, which added blocking to this browser.
Most modern browsers come with pop-up protection tools. Third-party tools usually include other features, such as ad filtering.
Popup windowsSome types of downloaded content - images, free music and others - may 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 the currently open 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 the Ctrl key while clicking on a 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 blockerThe combination of a banner ad and a pop-up window is a "hover ad" that uses DHTML to display on screen on top of the page content. Using JavaScript, an ad can be overlaid on top of a web page in a 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 ads are part of the web page, they cannot be blocked using a blocker, but they can be prevented from opening by 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 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.
The ad uses two very simple 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.
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. Thus, when developing advertising messages, on-screen buttons or controls are created that are similar to the “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 feature. 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 in the top right corner. Select "About Chrome" at the bottom, a new tab will open 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 enter Windows Update. For Internet Explorer 10 and 11, you can turn on automatic updates by clicking the Gear icon and selecting About Internet Explorer.
Sometimes website PopUPs and similar software are too deeply embedded to be removed by updating. In such cases, reinstalling or changing your web browser may help resolve the issue.
First, download the latest version of the browser you want to use. You can find download links on the main page of each application.
09/26/14 23KFor many Internet users, the term “pop-up window” evokes negative associations. A picture immediately “floats” before your eyes of how, when trying to view the necessary information on the site, this reptile covers the necessary piece of text. What’s even worse is that if you try to close it, the user is often transferred to another resource altogether.
Are these pop-up windows of yours such a bastard?Despite this bad reputation, pop-ups can be useful as well as annoying. Initially, they are just a type of dialog boxes used in programming as elements of the user interface.
They serve for information and as a means of dialogue between the user and the program (web application). But, unfortunately, such a negative attitude of many users towards pop-up windows is largely justified, because on the Internet they are used mainly for advertising purposes.
- Opening in the foreground (pop-up) - pop up on top of the main one;
- Opening in the background (pop-under) - open behind the main window.
The latter are the most insidious. They become active and visible to the user only after the main one is closed. Therefore, it will not be possible to determine their source and block them in time.
Means of struggleDue to the widespread use of unwanted pop-up advertisements on the Internet, many software developers have begun to build countermeasures into their products.
The main program for using the Internet is the browser. Therefore, the main method of blocking advertising windows is implemented in the browser:
- Internet Explorer was the last of all software products to implement the ability to block pop-up ads. This was done only in 2004;
- Opera - this product was the first browser in the world with a built-in pop-up blocker. Pop-up windows in Opera can be blocked since 2000;
- Mozilla Firefox - This browser has improved the approach to combating advertising that was implemented in Opera. In contrast, in Mozilla, not all pop-up advertisements are blocked, but only those that are loaded when the main window is opened.
In modern browsers, the pop-up blocking system is configured through the user interface. Chrome, like most other browsers, has the ability to enable or disable blocking, as well as create a list of exceptions (trusted sites):
In web programming, several technologies are used to create pop-up windows. The main means of creating them is still javascript. Its functionality includes several types of dialogs, the action of which is similar to the action of pop-up windows:
- The alert() method displays a regular text message on the screen. To hide the dialogue after reading, you need to click on the “Ok” button at the bottom of the window;
- The confirm() method is similar to the previous method. But the dialog it displays, in addition to “Ok”, is also equipped with a “Cancel” button. With their help, the user can accept or refuse the condition specified in the window;
- The prompt() method is used to call another type of javascript pop-up window. Unlike those mentioned above, this window is also equipped with a text field. The user can enter text data into it, which can be assigned to the value of the desired variable.
The action of all three methods and the types of dialogue they call are shown in the image:
But these are just types of dialogues. To create a real popup window in javascript, you use the open() method of the window object.
Here is the complete method syntax:
win = window. open (url, name, params) , where:
- url is the address of the page that will open in a new window;
- Name – the name of the created window. Can be used for further processing in forms (target parameter);
- Params – a string of parameters for the new window. You can find out their complete list yourself from the javascript documentation.
The image below shows the method in action and provides a simplified popup script:
A function f1 is created, the body of which implements a call to the window. open() . Then this method is called with one parameter indicating the address of the page that will open in the created window. After this, the setTimeout() method is called. The f1 function and the time interval after which a new window will open are passed to it as parameters.
Creating a Popup Using CSSYou can also create a popup in CSS. This feature was realized only with the release of the third version of this technology. You should not overuse this option, because it will only work in the newest versions of browsers:
As you can see from the picture, such a modal window was created using CSS and html. Unlike those created using js, this pop-up window cannot be moved around the page. In addition, its code is too cumbersome to describe it in the scope of this article. But such a window will not be blocked by the browser.
Review of other technologiesIt is not at all necessary to develop a pop-up window yourself. Nowadays, many free jquery plugins have been created for this. By connecting one of them, you will get a finished window.
There are also many plugins for popular CMS. They may include a whole set of windows. The design and functionality of each of them is “tailored” to perform a specific task (registration, sending a message, etc.).
There are also several popular scripts. An example of one of them will be given below. Pop-up windows in Contact and other popular social networks work on this principle:
How to make a popup window in Jquery $(document).ready(function())( PopUpHide(); )); function PopUpShow())( $("#window-popup").show(); ) function PopUpHide())( $("#window-popup").hide(); ) .box ( width: 400px; height: 300px ; background-color: #ccc; margin:0px auto; padding:10px; font-size:40px; color: #fff; ) .popup ( width:100%; min-height:100%; background-color: rgba( 0,0,0,0.5); overflow:hidden; position:fixed; top:0px; ) .popup .popup-content ( margin:40px auto 0px auto; width:200px; height: 80px; padding:10px; background- color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; ) Example of a popup window
Show popup Congratulations, you made a popup!!! Hide popup
The code is given in the “for the lazy” version. By pasting it into any editor and running it, you will get a ready-made example of a pop-up window based on jquery.
External popup windows with advertising are terrible ideas! All sane webmasters will never advise you to use them on your site. But, if we are talking about internal popup windows, this is a useful element that provides additional information, warns, prevents, gives the opportunity to choose 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.
To implement the popup window, we will use CSS and a few lines of jQuery code, and of course HTML. Please note that to implement our idea, you do not need any plugins or additional tools, everything is very simple and reliable!
Click me X Some Title Goes Here: Some more content, for when you want to add a little bit more
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; padding: 20px; 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 other CSS styles in JavaScript code. These styles require additional computation, so it would be better to do it using jQuery. Let's move on to the javascript code.
jQuery window popup codeTo begin, include the jQuery library file. 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(""); var boxWidth = 400;
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 the id (the last number in the link class name) */ var name = $(this).attr("class"); var id = name; var scrollPos = $(window).scrollTop(); /* Correct display of a popup window, covering with a 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); )); ));
With this, creating a popup window using jQuery is complete! We don't need to download plugins and write complex functions, just a few lines of code. You can download the sources and see how it works locally on your computer.
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. Of course, we are talking 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:
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 further interaction with 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, WP Beginner receives about 70-80 new subscribers through various lead generation methods. But the larger the subscription base, the more successful the 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 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 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 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 popup had no effect on bounce rates. 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 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 can’t embed just any pop-up ad into your landing page and hope for a high conversion rate. 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 pop-up window remains the only element on the page that is clearly visible to the user - recently there has been a trend to use pop-up windows in this 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 down the page to a certain point - this format is most often 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 Popups
If we talk about testing overlays, the SumoMe service has collected the following data: today the 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.
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 is created in one of the simplest 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; transition: opacity 400ms ease-in; display: none; pointer-events: 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. The background 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 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 the 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 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.
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; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover ( background: #00d9ff; )
Close( background : #606061; |
