Reyala News Popup

by surfine

HTML

<div class="popup-full">
  <div class="popup-full-content">
    <h1>އެންމެ ފަހުގެ ޙަބަރުތައް ކިޔާލަން ބޭނުންތަ؟</h1>
    <a href="https://news.reyala.com/category/news/?utm_source=popup&utm_medium=popup&utm_campaign=popup" class="popup-full-button popup-full-next">ބޭނުން</a>
    <br>
    <a href="javascript: hidePopup();" class="popup-full-button popup-full-exit">ނުބޭނުން</a>
  </div>
</div>

CSS

*
{
  box-sizing: border-box;
}

.popup-full
{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #F44336;
  z-index: 9999;
}

.popup-full-content
{
  min-width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  text-align: center;
}

.popup-full-content h1
{
	color: #fff;
	margin-bottom: 30px;
}

.popup-full-content a
{
  width: 100%;
  max-width: 250px;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

.popup-full-content .popup-full-next
{
  color: #2d2d2d;
  background: #fff;
}

JavaScript

function showPopup() {
  $('.popup-full').fadeIn();
}

function hidePopup() {
  $('.popup-full').fadeOut();
}

$(window).scroll(function() {
  var hT = $('#scroll-to').offset().top,
    hH = $('#scroll-to').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
  if (wS > (hT + hH - wH)) {
    console.log('H1 on the view!');
  }
});