0

Can anyone help me ?

I need to create pop-up to specific in line.

if the user was reading the article and have already reached the mid articles then a pop up will appear, and if returning to the top of the popup will be hide.

This is my source code pop up 

$(".news").css("width","100%");
$(document).ready(function(){
    if($("#blanket").length==1){
        if($("#popUpDiv2").length==1){
            popup('popUpDiv2');
        }
        else{
            popup('popUpDiv');
        }
    }
    checkCookie('popUpDiv');
    $('#popUpDiv').removeAttr('style');     
    $('#popUpDiv').css({left: 20, bottom: 25}); 

});
#blanket {width: 10px;background-color:#fff;opacity:0;position:fixed;z-index:9001;top:0px;left:0px;/*width:100%;*/}
#popUpDiv {position:fixed;background:url('../image/Pop-Up-Banner-NOS-6000-Vermillion.png') no-repeat;width:275px;height:275px;z-index:9002;background-size: 275px auto;}
.trbox{width:270px;height:270px;bottom: 0px;left: 0px;}
#popUpDiv a,#popUpDiv2 a {width:45px;height:10px;padding: 2px 35px;position:relative;bottom: 29px;left:103px;}/*fix jangan diutak atik*/
.closepopup2{position: absolute;cursor: pointer;font-weight: bold;color: #fff;width:20px;height:2px;padding: 5px 10px;float:right;bottom: 232px;right:1px;} /*fix jangan diutak atik*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div id="popup"></div>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;"><div class="trbox">&nbsp;</div>
    <a target="_blank" href=""></a>
    <div onclick="popup('popUpDiv')" class="closepopup2"></div>
    <!-- <div class="popUpbottom">
        <div class="comboAlert"><input type="checkbox" name="checkboxAlert" id="checkboxAlert"> Don't show again Today</div>
    </div> -->
</div>
Santosh Khalse
  • 12,002
  • 3
  • 36
  • 36
Thoh Agung Narso
  • 19
  • 6
  • Your code only shows the code for the popup (and uses local images at that). You need to add the code for your articles as well, along with any scroll behaviour that causes the popup to appear. – Obsidian Age Jan 23 '17 at 03:49
  • Your question is `off-topic` on this website. It needs to be in the form of ***Why isn't my code not working? I think it should work!***, instead of the form of ***I need you to code this for me, for free***. We can help you learn to code, we will not code for you. There is a huge difference. Please read [How to ask](http://stackoverflow.com/help/how-to-ask) section. – tao Jan 23 '17 at 04:01
  • @AndreiGheorghiu sorry if it comes out of the topic, I just want to ask for help to display pop up when it reaches a certain paragraph – Thoh Agung Narso Jan 23 '17 at 04:18

1 Answers1

0

For the line which you want to use as trigger for the popup, you have to do the following.

Suppose it is a div. Calculate the scollTop of the div on scoll event. and when the scollbar position becomes equal to the scrollTop of the div, then show the popup.

See below links, How to get scrollbar position with Javascript? http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop

Community
  • 1
  • 1
Shubhranshu
  • 511
  • 3
  • 12