Subscribe onscroll

by kompiajaib

HTML

<button onclick="eraseCookie('hideDialog');">Hapus Kuki</button>
<script>
  var appended = false,
    bookmark = document.createElement("div");
  bookmark.id = "fbOnscroll";
  bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">\
  <iframe name="f13bea94f064144" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&amp;app_id=113869198637480&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&amp;container_width=613&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
<div class="close-fbcookie" onclick="hidesubscribebox()"><span>&#215;</span> Don\'t Show Again</div>\
<div class="close-fbbox" onclick="hidesubscribe()">&#215;</div>\
              </div>\
              <div class="layer fadeIn"></div>\
';

  function hidesubscribe() {
    document.getElementById("fbOnscroll").style.display = "none"
  }

  function hidesubscribebox() {
    document.getElementById("fbOnscroll").style.display = "none", createCookie("hideDialog", "hide", 7000)
  }

  function createCookie(e, o, n) {
    if (n) {
      var t = new Date;
      t.setTime(t.getTime() + 24 * n * 60 * 60 * 1e3);
      var i = "; expires=" + t.toGMTString()
    } else var i = "";
    document.cookie = e + "=" + o + i + "; path=/"
  }

  function readCookie(e) {
    for (var o = e + "=", n = document.cookie.split(";"), t = 0; t < n.length; t++) {
      for (var i = n[t];
        " " == i.charAt(0);) i = i.substring(1, i.length);
     ...

CSS

body {
  height: 8000px
}

.fbbox-wrapper {
  width: 360px;
  position: fixed;
  left:50%;
  margin-left:-180px;
  top:50%;
  margin-top:-131px;
height:auto;
  background-color: #fff;
  -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
  padding: 10px;
  border: 1px solid #dedede;
  border-radius: 5px;
      -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;z-index:1000000
}

.close-fbbox {
  position: absolute;
  top: -15px;
  right: -15px;
  font-family: Arial;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  width: 25px;
  color: #555;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 100%;transition:all .4s ease-in-out
}
.close-fbcookie{background: #fff;transition:all .4s ease-in-out;
  padding:1px 5px;
  border:1px solid #dedede;
  border-radius: 2px;
  font:11px Arial;
  color: #555;
  display:inline;
  float:left;line-height:1;cursor: pointer;
}
.close-fbcookie span{
  font-size:18px;
  font-weight:bold;vertical-align:middle
}
.close-fbbox:hover,.close-fbcookie:hover{background: #ddd;border:1px solid #ccc}
.layer{
  position:fixed;
  top:0;left:0;bottom:0;right:0;
  background:rgba(0,0,0,.7);z-index:999999;
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes zoomInUp {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475)...