CODEWITHSUNDEEP
jquerypopup
Senep Ali
Senep Ali

Reputation: 177

Unable to close PopUp

I make a jQuery dialog window to show on page scroll and display a div in this popup. The problem is if I close the popup and continue to scroll the window shows again and again. So how can I close it for good?

<div id="spopup" style="display: none;">
<!--close button-->
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeSPopup();">
    <img src="ico-x.png" width="18" height="18"/>
</a>

The css:

#spopup{
    background:#f3f3f3;
    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    -moz-box-shadow:inset 0 0 3px #333;
    -webkit-box-shadow:inset 0 0 3px #333;
    box-shadow:inner 0 0 3px #333;
    padding:12px 14px 12px 14px;
    width:300px;
    position:fixed;
    bottom:13px;
    right:2px;
    display:none;
    z-index:90;
}

The jquery

$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5)
        $("#spopup").show("slow");
    else 
        $("#spopup").hide("slow"); }); function closeSPopup(){

    $("#spopup").hide("slow"); 
}

jsfiddle: https://jsfiddle.net/jqvo1tmf

Upvotes: 1

Views: 1087

Answers (7)

Володин Андрей
Володин Андрей

Reputation: 440

Simpler: 

    //$("#spopup").hide("slow");
    $("#spopup").remove();

Full code sample:

    $(window).scroll(function(){
       if($(document).scrollTop()>=$(document).height()/5)
       $("#spopup").show("slow");else $("#spopup").hide("slow");
    });
    function closeSPopup(){
      //$("#spopup").hide("slow");
      $("#spopup").remove();
    };

Upvotes: 0

Pranav Bilurkar
Pranav Bilurkar

Reputation: 965

Try this : Jsfiddle

Code updated - 

var popup ='1';
$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5 && popup=='1')
        $("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
popup ='0';
    $("#spopup").hide("slow");
};

Upvotes: 1

Kunal Gadhia
Kunal Gadhia

Reputation: 370

Your on-click function is not getting called, so instead of that you can give id to your close button image and then write close function accordingly.

Assuming id of your close image is close.

Then JS would be :

$("#close").on('click', function(){
   $("#spopup").hide("slow");
});

Please check fiddle for your solution Fiddle Link

Upvotes: 2

murrometz
murrometz

Reputation: 904

When you first show a popup add a class to it. Like "fired".

Then when you scroll, check if the popup has this class.

And if not, then show it.

Upvotes: 0

BlackBurn027
BlackBurn027

Reputation: 642

A simple / quick fix for this issue would be to use a global variable which acts as a flag

Initially the flag shall be 0 / false

On start scrolling when he event triggers check if the flag was rised (wasClosed)

if not then show the pop up else keep it hidden.

The flag will be switch to true once the user clicks on the close button.

<script>
var wasClosed = false;

function closeSPopup(){
    $("#spopup").hide("slow");
    wasClosed = true;
};

$(window).scroll(function(){

if($(document).scrollTop()>=$(document).height()/5 && !wasClosed)
   $("#spopup").show("slow");
else 
   $("#spopup").hide("slow");
});

</script>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You get the following error in your fiddle :

Uncaught ReferenceError: closeSPopup is not defined

So you have just to put the definition of your function closeSPopup() in body, check the Updated fiddle.

Hope htis helps.

Upvotes: 0

karam
karam

Reputation: 1

 <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href='#'>
    <img src="ico-x.png" onclick="closeSPopup()" width="18" height="18"/>
</a>

Upvotes: 0

Related Questions