[GET]Increase Leads & Opt-ins Using this Exit PopUp/PopOver - Unblockable -Appears on Exit

Hey Crazyfix,

After reading your post, I'm still confused. Do I have to put all the 4 script codes bellow to between <head> </head> or just one of them?:
FancyBox Code Portion 1

FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUpHTML

Code for PopUp Appearance

Code for What Determines a User is Leaving Site

Thanks for your great share!
 
Advertise on BHW
hotpassion said:
Hey Crazyfix,

After reading your post, I'm still confused. Do I have to put all the 4 script codes bellow to between <head> </head> or just one of them?:
FancyBox Code Portion 1

FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUpHTML

Code for PopUp Appearance

Code for What Determines a User is Leaving Site

Thanks for your great share!
Click to expand...

As I am a "list how to do things" freak, after reading this thread 123325 times I was able to make it work for me (with one exception which I will list below) I will break it down for you also:

1. Fancy Box Code Portion 1

Install between head tags
-------------------------------------------------
2. FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUp

Also install between head tags
-------------------------------------------------
3. HTML Code for PopUp Appearance

Install anywhere between <body> tags
--------------------------------------------------
4. Code for What Determines a User is Leaving Site

Also Install anywhere between <body> tags
--------------------------------------------------

Now a question for crazyflx , it works for me its GREAT thank you so much, my problem is that the popup box appears at the bottom of the site also. It dissapears from the bottom after you make it popup. btw I am making the popup only as image. Can you help?
 
Snatch said:
4. Code for What Determines a User is Leaving Site

Also Install anywhere between <body> tags
Click to expand...
The code should be placed right after opening <body> tag.


Snatch said:
Now a question for crazyflx , it works for me its GREAT thank you so much, my problem is that the popup box appears at the bottom of the site also. It dissapears from the bottom after you make it popup. btw I am making the popup only as image. Can you help?
Click to expand...
My guess is that you don't have "display:none" in your style attribute.
 
45415 said:
The code should be placed right after opening <body> tag.

My guess is that you don't have "display:none" in your style attribute.
Click to expand...

Hey, thank you for your reply. I thought to do that before and it worked, but it also "worked" for the popup and I got no popup also. May be I am placing the style in the wrong div tag. Can you specify where exactly should I place the display none so it only affects the bottom appearing of the div?


45415 said:
The code should be placed right after opening <body> tag.
Click to expand...

I placed it right after opening <body> tag instead of having it just before the closing </body> tag, but I didnt saw anything different. Correct me if I am wrong. txs
 
Code for What Determines a User is Leaving Site has to be placed right after opening <body> tag, because we want to know if user wants to exit the page (move the mouse up and close the tab).

I added an image in the code below (inside the div with display:none). Also added border to the div tags, so you could see, why it is necessary to put that code right after opening <body> tag.

I tested the code, works as expected. If you are testing locally, you should remove the leading slash in FancyBox Code Portion 1 for all src attributes.

Code: 
<html>
<head>
<!-- FancyBox Code Portion 1 -->
<!-- Add jQuery library --><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- End of FancyBox Code Portion 1 -->


<!-- FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUp -->
<script type="text/javascript">  
$(document).ready(function () {
    $(".fancybox-button").fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        closeBtn: false,
        helpers: {
            title: {
                type: 'inside',
                position: 'top'
            },
            buttons: {},
            overlay: {
                css: {
                    'background': 'rgba(0, 0, 0, 0.95)'
                }
            }
        }
    });

    $(".various2").fancybox({
        fitToView: true,
        autoSize: true,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none',
        padding: 0,
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.95)'
            }
        }
    });


});


var upordown = 0;

function popup(upperorlower) {

    if (upperorlower == 'upper') {
        upordown = 1;
    }

    if (upordown == 0) {
        $("#inline").trigger('click');
        $(".fancybox-skin").css({"background": "transparent", "box-shadow": "none", "-webkit-box-shadow": "none", "-moz-box-shadow": "none", });
        $(".fancybox-opened").css({"background": "transparent", "box-shadow": "none", "-webkit-box-shadow": "none", "-moz-box-shadow": "none", });
    }

    if (upperorlower == 'lower') {
        upordown = 0;
    }

}
</script>
<!-- End of FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUp -->
</head>

<body>
<!-- Code for What Determines a User is Leaving Site -->
<div id="alert" style="width:100%; height:40px; top:0px; position:fixed; z-index:10000;">
    <!-- Added border: 1px solid #000 to see div while testing -->
    <div id="upper" style="width:100%; height:20px; border:1px solid #000" onmouseover="popup('upper');"></div>
    <div id="lower" style="width:100%; height:20px; border:1px solid #000" onmouseover="popup('lower');"></div>
</div>
<!-- End of Code for What Determines a User is Leaving Site -->


<!-- HTML Code for PopUp Appearance -->
<div id="inline" class="various2" style="display:none; width:500px; border:#06F thick solid; border-radius:20px; background-color:#fff; margin:20px;">
    <!-- Next line is your image -->
    <img src="https://content.blackhat-static.com/blackhat-seo/images/styles/blackngold4/misc/logoi.jpg" />
</div>
<!-- End of HTML Code for PopUp Appearance -->
</body>
</html>
 
IT WORKS, thank you.. I placed the codes just as you told me to and now it works fine. The only thing is I wish I knew how to style the box with my own code so I can make optin forms etc inside the pop up and not only image.
 
Snatch said:
IT WORKS, thank you.. I placed the codes just as you told me to and now it works fine. The only thing is I wish I knew how to style the box with my own code so I can make optin forms etc inside the pop up and not only image.
Click to expand...

Just replace the <img> tag with whatever HTML code you need. If you don't know HTML/CSS well enough, there are plenty code examples on the Internet, you just need to know what you are looking for. Good luck! :)
 
Txs that's great, looks like something is wrong with the link of my popup image, the link is ok but when I click on it it looks like stuck and its not hoping to the link. Can you help :)
 
Nevermind the onclick="top.location.href was missing, dunnow what is that do but I figured out that wasnt there and I placed it and now it works. Thank you again ;)
 
Excellent share OP - amazed that such a simple idea hasn't been properly implemented before this. Will defo check it out.
 
Thanks 45415 for helping out Snatch. It's always nice to see other members chime in and help, even when they weren't the thread creators. Puts a smile on my face :)

And thanks for the compliment robvandam
 
I'll fix it guys, give me a bit, lots of stuff going on.
 
This is exactly what I need right now!

Is just the demo not working or the whole code? Anyway, I will wait :)

Thanks crazyflx!
 
It's live & working again. Was a z-index issue (youtube had the top bar z-index set to 1999999999, instead of modifying my code, I just made the page show yahoo instead of youtube).
 
Oh, man!
It looks awesome! And I just can't believe it's free!
You definitely saved me money, mate.

Thanks again! Keep it up :)
 
So I've managed to get it up and running on my "fun" site.

Primarily, I want to use it to get more Facebook likes on my page, but I don't want to annoy my fans who keep coming back.
Can you make cookies stay longer? Like 90 days isntead of one session?
Or better approach would be if the popup won't show up if the vistitor already liked my page, but I guess its a lot more coding :D (if is it even possible)

Anyway, thanks again Crazyflx! :)
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top