beChallenge.js

 var backgroundOpacity = jQuery("<div>").css({
    position: "fixed",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0,0,0,0.5)",
    zIndex: 25,
    display: "none"
  });

(function savedCart(url) {

  var popUp = jQuery("<div>").css({
    position: "relative",
    top: "30%",
    left: "28%",
    width: "40%",
    height: "60%",
    backgroundColor: "white",
    padding: "12px",
  });

  var popUpTitle = jQuery("<h3>").css({
    textAlign: "center",
    fontFamily: 'Times New Roman',
    color: "#365899",
    fontSize: "20px",
    textTransform: "uppercase",
    letterSpacing: "1px",
    marginBottom: "30px",
    paddingTop: "20px",
    
  }).text("Hey there!")

  var popUpContent = jQuery("<h2>").css({
    textAlign: "center",
    fontFamily: 'Times New Roman',
    color: "#000000",
    fontSize: "18px"

  }).html("Would you like to purchase the items in your cart? " + 
  " <a onclick='backgroundOpacity.fadeOut()'> " +
  " <span id style='" +
  "  position: absolute;" +
  " cursor: pointer; " +        
  "  top: 5%; " +
  " left: 2%;'>✕</span>");

  popUp.append(popUpTitle);
  popUp.append(popUpContent);
  backgroundOpacity.append(popUp);

  jQuery("body").append(backgroundOpacity);

  (function() {
    var bottomOfPage = false;
    var jWindow = jQuery(window);
    var lastTenPercent = jQuery(document).height() * .9;
    jWindow.scroll(function() {
      var scrollPosition = jWindow.scrollTop() + jWindow.height();
      if (!bottomOfPage && scrollPosition >= lastTenPercent) {
        bottomOfPage = true;
        backgroundOpacity.fadeIn();
      } else if (bottomOfPage && scrollPosition < lastTenPercent) {
        bottomOfPage = false;
        backgroundOpacity.fadeOut();
      }
    });
  })();
  
 })();