JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js&quot;   integrity=&quot;sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=&quot;   crossorigin=&quot;anonymous&quot;"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <div class="popupContainer">
          <div class="popupHeader clearfix">
            <p class="ellipsis"><b> Lorem ipsum dolar sit amt flip flop and something else</b></p><button class="closepopupBtn"><b>x</b></button>
          </div>
          <div class="popupContent">
                <p>
                    Text to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insert
                </p>
              <button class="button" style="background-color: green; width: 100%;" onclick="location.href='http://google.com';">Yes</button>
              <button  class="closepopup" type="button" style="background-color: orange" href="#">No</button>
          </div>
      </div>

CSS

.popupContainer {
    padding: 5px 15px 0 15px;
    position: fixed; 
    background-color: #718F97;
    bottom: 0;
    right: 50px;
    max-width: 300px;
    color: white;

}
.popupHeader {
    width: 100%;
    height: auto;
}
.popupHeader p {
    max-width: 85%;
    float: left;
    margin-bottom: 5px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.popupHeader button {
    float: right;
    text-decoration: none;
    border: none;
    background-color: #718F97;
    color: white;
    margin-bottom: 5px;
}

.popupContent {
    display: none; 
}

.popupContent p {
    max-width: 100%;
    clear: both;
}

.popupContent button {
    width: 100%;
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function(){
       
      
 var havePoppedUp = 0;      
 $(window).on('scroll', function() {
   var st = $(this).scrollTop();
   var wh = $(document).height() - $(window).height();
   var perc = (st*100)/wh;
   
   if(perc > 50 && havePoppedUp == 0)
       {
           havePoppedUp = 1;
            $(".popupContent").css("display", "inline");
            $('.popupHeader h7').removeClass("ellipsis");  
           
       }
});


    $(".closepopup").click(function(){
        $(".popupContainer").fadeOut()
    });
      
    $(".closepopupBtn").click(function(){
        $(".popupContainer").hide()
    });


    $(".popupHeader").click(function(){
        if($('.popupContent:visible').length == 0)
            {
            $(".popupContent").slideDown(600);
            $('.popupHeader p').removeClass("ellipsis");
            }
        else {
            
            $(".popupContent").slideUp(600);
            $('.popupHeader p').addClass("ellipsis");
            
        }    
            
    });        
                
});