When we already wrote aboutΒ pop-up window at the entrance to the site, and today we want write another note about pop-up windows on the site, and consider the option of pop-ups when clicking on a button or link.
In this example, when creating a pop-up window, we will use the html, css, and js markup. A pop-up window will appear when clicking on a link or button, and close when clicking on a special text or click outside the window.
In general, pop-up windows on the site or as they are called popup window or pop-up modal window are very useful and allow you to display in them a wide variety of information, for example, they can display the subscription form or order form, or just some additional information to which then the element on the site.
Using pop-ups on the site is also very convenient and quick to increase the number of subscribers. For example, if a well-promoted site brought in a day 10-15 subscribers with some kind of inconspicuous form of subscription that was placed somewhere on the site, then when you connect a pop-up window, this amount can immediately be multiplied by 100, 200 and sometimes more percent.
At development of sites I very often customers ask how to create a pop-up window, so I decided to write here a short article on about this, well, plus make yourself a short note.
What are the advantages of pop-ups?
- The main purpose of the pop-up window is to attract the attention of your visitor. When you visit your site, the user immediately sees a pop-up modal window, which provides some sort of yummy, that is, some useful information that you are offering emu.
- Practice shows that the use of pop-ups has a positive effect on the conversion of the site. This allows you to increase traffic to the site and the number of views. You can significantly improve the result, get more sales, or subscribers than from the usual static block.
- A pop-up window allows you to create a quick client feedback with you if you place the contact form in it. Or you can post there answers to some popular questions from clients that allow your visitor to decide to contact you faster.
Disadvantages of pop-ups?
There are, of course, also disadvantages from modal pop-ups, the list of the main shortcomings will be considered below:
- Many users are annoyed with pop-ups, and they leave your site without even acquiring basic information, thereby reducing the attendance of your resource. Therefore, try to make pop-ups not intrusive, and it is recommended that they appear with a delay in time. Just make them neat and convenient, for example, you do not need to make a window on the entire page of the site, otherwise the user simply does not find the right closing button, and most likely will go to your competitor.
- It is also not recommended to hang a lot of various pop-ups on the site as this can be regarded as spam, as a result of which the reputation of your Internet resource can drop dramatically. Be sure to take this fact into account.
- There are a lot of ad blockers that are installed in the user’s browser, in this case your visitor will not see your advertisement. But not everyone uses these plug-ins and extensions for this much to be upset, but still some percentage is eliminated.
Well, that's all the basic facts about using pop-ups on the site.
Now let's get down to the most pop-up window. Let me remind you once again we make a pop-up window for buttons and links, that is, a window that will appear only when clicking.
First you need to check if you have a jQuery library connected, if not, then you need to connect it, for example:
|
1 |
<script src="https://code.jquery.com/jquery-1.11.1.js"></script> |
Add this code somewhere betweenΒ <head> ...</head>, if your jQuery library is already connected, you do not need to connect it a second time.
An example of how this window will look like in the photo below:
Or see a live example, you can on our site:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div align="center" class="fond"> <div id="myfond_gris" opendiv=""></div> <div align="center" style="padding-top:35px;"> <div style="background-color:#2d3b44;" iddiv="box_1" class="mymagicoverbox"> Button Example 1 </div> <div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox"> Button Example 2 </div> </div> <div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> The title of the first first window! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>Do you like sport? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">NO</div> </div> </div> </div> <div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;"> The title of the second window! <div class="mymagicoverbox_fenetreinterieur" style="height:150px; "> <div align="center"> <br>The earth is round? <br><br> <div style="width:100px" align="center" class="mymagicoverbox_fermer">YES</div> </div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(document).ready(function(){ $(".mymagicoverbox").click(function() { $('#myfond_gris').fadeIn(300); var iddiv = $(this).attr("iddiv"); $('#'+iddiv).fadeIn(300); $('#myfond_gris').attr('opendiv',iddiv); return false; }); $('#myfond_gris, .mymagicoverbox_fermer').click(function() { var iddiv = $("#myfond_gris").attr('opendiv'); $('#myfond_gris').fadeOut(300); $('#'+iddiv).fadeOut(300); }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
.fond { position:absolute; padding-top:0px; top:0; left:0; right:0; bottom:0; background-color:#1289aa; } .mymagicoverbox { display:inline-block; color:#ffffff; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:'Roboto'; -webkit-box-shadow: 0 1px 3px 0 #b5b5b5; border: 1px solid #a4b9a5; background-color:#cb2025; } .mymagicoverbox_fenetre { z-index:9999; position:fixed; margin-left:50%; top:100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family:'Roboto'; } .mymagicoverbox_fenetreinterieur { text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:'Roboto'; font-size:17px; border-top:1px solid #e7e7e7; margin-top:10px } .mymagicoverbox_fermer { color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font-family:'Roboto'; } #myfond_gris { display: none; background-color:#000000; opacity:0.7; width:100%; height:100%; z-index:9998; position:fixed; top:0; bottom:0; right:0; left:0; |
Try it and you will succeed, good luck in our not easy business. 
No Comment
You can post first response comment.