Show popup when user approaches browser's address bar

Question

Show popup when user approaches browser's address bar

Navigation

#1 by (1 votes)

1

I have a pop-up that opens every time the site is opened. But I would like to change. I want Pop-up to open whenever the user approaches the mouse cursor to the address bar of the browser.

if ($('.popup-banner').length > 0) {
  $('.popup-overlay, .popup-banner').delay(400).fadeIn(300);

  $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
    $('.popup-overlay, .popup-banner').fadeOut(300);
  });
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.75);
}

.popup-banner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  width: 650px;
  height: 350px;
  margin: -175px 0 0 -325px;
  background: #1c3d93 url(/assets/images/layout/bg-banner-popup.png?v2) center center no-repeat;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
  z-index: 9001;
}

.popup-banner h5 {
  color: #fff;
  font: 500 16px/24px 'Montserrat', Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  margin: 0;
  padding: 50px 60px 0;
  text-align: center;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.popup-banner h5 strong {
  color: #ffb82e;
  display: block;
  margin: 0 0 10px;
  font: 700 34px 'Montserrat', Arial, Helvetica, sans-serif;
}

.popup-banner form {
  margin: 0 auto;
  padding: 0;
  padding: 20px 40px;
  text-align: center;
}

.popup-banner .mailing {
  background: #fff;
  border: 0;
  border-radius: 50px;
  color: #555;
  display: inline-block;
  font: 500 12px/46px 'Montserrat', Arial, Helvetica, sans-serif;
  height: 46px;
  margin: 0;
  outline: none;
  margin: 0 5px;
  padding: 0 20px;
  width: 46%;
  text-transform: none;
  outline: none;
}

.popup-banner .btn-ok {
  background: #2b2525;
  border-radius: 50px;
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  color: #fff;
  height: 46px;
  font: 700 22px/46px 'Montserrat', Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  margin: 10px 0;
  width: 95%;
  outline: none;
}

.popup-banner a {
  display: block;
  color: #fff;
  font-size: 10px;
  text-decoration: none;
  margin: 10px 0 0;
}

.popup-banner span.fechar {
  content: "X";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

<?php
    if($showPopup != 'no') {
?>
  <div class="popup-overlay"></div>
  <div class="popup-banner">
    <span class="fechar">
        <i class="fa fa-times"></i>
    </span>
    <h5>
      <strong>10% de desconto</strong> Cadastre em nosso e-mail marketing e <br>receba um cupom de 10% de desconto para a sua <br>primeira compra em nossa loja virtual!<br>
    </h5>
    <form action="/newsletter" method="post">
      <input type="text" class="mailing" name="nome" placeholder="Digite seu nome" required>
      <input type="text" class="mailing" name="email" placeholder="Digite seu e-mail" required>
      <input type="hidden" name="source" value="Cupom 10% - Cadastro">
      <input type="submit" class="btn-ok" name="btn-ok" value="Ok">
      <a class="link-fechar" href="#">Já sou cadastrado!</a>
    </form>
  </div>
  <?php
    }
?>

jquery

asked by anonymous 03.10.2017 / 13:58

1 answer

Ionic with Cordova, compilation error with AndroidManifest.xml How to leave an HTML code rotatable on any computer by Pen drive

score 1 · Accepted Answer

Capture the position by firing 'mousemove', check the Y value, compare distance you want:

$(window).on("mousemove",function(event) {
    var y = event.pageY;
    if(parseInt(y) < parseInt(20)){
        console.log(y);
    }
});

You just need to try not to get shot in 100% of the time or whatever way you want it to go.

Example on the fiddle: link (mouse over answer window with console open)