// popup jquery

        $('.pinkBtn').click(function(){
          $('.model').fadeIn();
          $('body').addClass('hide-scroll');
        });

        $('.close-popup').click(function(){
          $('.model').fadeOut();
          $('body').removeClass('hide-scroll');
        });
        // scroll popup
        var n = 0;
         $(window).on('scroll', function(){
             var service = $("#ourServices").position().top
             //alert(service);

             /*if($(this).scrollTop() < 50){
                 n=0;
             }*/
            if($(this).scrollTop() > service && n == 0){
               $('.model').fadeIn();
               n++;
             }
         });

         // HTML
         <div class="model">
		<div class="popup">
			<div class="popup-header">
				<h1>Popup Heading</h1>
				<a href="javascript:void(0)" class="close-popup">X</a>
			</div>
			<div class="popup-body">
				<p>Website Design With Better Performance  & Built-In Strategy That Simply Works Better</p>
			</div>
		</div>
	</div>


  //CSS

  /* Popup css */
.model {
    position:  fixed;
    z-index:  111;
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: none;
}
.popup {
    width:  500px;
    min-height:  300px;
    position:  absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 20px;
    padding: 30px;
}

.popup-header h1 {
    float:  left;
}

.popup-header .close-popup {
    float: right;
}

.popup-header {
    overflow: hidden;
}

.hide-scroll{
    overflow-y: hidden;
}