Feelings about Pop Ups

Elements
1

Exploring JavaScript options in Chat GPT

First off… useless or beneficial?
Second… hate them or use them
Third…. Informational, sign up for email list, coupon or exit pop ups?

Curious to know your thoughts and what you do….

2

personal thought, and this is my opinion, I hate them

1 Like
3

Dislike pop ups. Moreover, most site designers forget that they need to account for both horizontal and vertical orientation of the device. Sometimes my iPad is horizontal, sometimes it’s vertical.

If you absolutely have to interrupt the reader, I prefer the auto slide down to reveal offer, click/tap anywhere to close.

4

Been looking at something called slide in - a small call to action banner that slides in on the bottom and takes up minimal space

🎺 Free Trumpet Warm-Up Guide — Download Now

#slidein { position: fixed; right: -300px; /* start offscreen */ bottom: 20px; width: 280px; padding: 15px; background: #222; color: #fff; border-radius: 8px; transition: right 0.5s ease; } #slidein.show { right: 20px; /* slide into view */ }
5

Here’s the code that works.. for slide in:

×

🎺 Free Trumpet Warm-Up Guide — Download Now

#slidein { position: fixed; right: 20px; bottom: 20px; max-width: 320px; padding: 14px 16px; background: #222; color: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 99999; transform: translateX(120%); /* start offscreen (GPU-friendly) */ transition: transform .5s ease; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } #slidein.show { transform: translateX(0); } #slidein a { color: #4fd1ff; text-decoration: underline; } #slidein a:hover { text-decoration: none; } #slidein-close { appearance: none; border: 0; background: transparent; color: #aaa; font-size: 20px; line-height: 1; cursor: pointer; position: absolute; top: 6px; right: 8px; } #slidein-close:hover { color: #fff; }
6

the forum is messing up the code - use contact form at MichaelDroste.com and I’ll send it in email

7

Try posting the code in a “code block” on the forum, as that will typically respect the formatting of the code. It is the “</>” item in the little toolbar above the editor.

8

If you do use them, make sure and have a delay on the popup. You don’t want it to pop as soon as the user hits the page. Google doesn’t like that.

9 
<!-- Slide-in Download panel -->
<div id="slidein" role="dialog" aria-live="polite" aria-label="Free Trumpet Warm-Up Guide">
  <button class="close" aria-label="Close">&times;</button>
  <p>🎺 Free Trumpet Warm-Up Guide — 
    <a href="https://TrumpetStudio.com/Books/warmup.pdf" download="warmup.pdf">Download Now</a>
  </p>
</div>

<style>
:root { --slidein-width: 320px; }

#slidein{
  position: fixed;
  bottom: 20px;
  right: 20px;                       /* anchor corner */
  width: min(90vw, var(--slidein-width));
  padding: 16px 44px 16px 16px;
  background: #222;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  font: 16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  z-index: 99999;                    /* make sure it’s clickable */
  transform: translateX(calc(100% + 40px)); /* start offscreen */
  transition: transform .5s ease;
  pointer-events: auto;
}
#slidein.show{ transform: translateX(0); }

#slidein .close{
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: 0;
  font-size: 24px; line-height: 1; color: #bbb; cursor: pointer;
}
#slidein .close:hover{ color:#fff; }

#slidein a{ font-weight:600; text-decoration: underline; color:#4cc3ff; }

@media (prefers-reduced-motion: reduce){
  #slidein{ transition: none; }
}
</style>

<script>
(function(){
  const PANEL_ID = 'slidein';
  const DELAY_MS = 5000;         // show after 5s
  const SHOW_ONCE_HOURS = 6;     // suppress for N hours after close

  const el = document.getElementById(PANEL_ID);
  const closeBtn = el.querySelector('.close');

  // Respect "show once" window
  try{
    const last = localStorage.getItem('slidein:lastHide');
    if(last && (Date.now() - Number(last)) < SHOW_ONCE_HOURS*3600*1000){ return; }
  }catch(e){}

  function show(){ el.classList.add('show'); }
  function hide(){
    el.classList.remove('show');
    try{ localStorage.setItem('slidein:lastHide', String(Date.now())); }catch(e){}
  }

  setTimeout(show, DELAY_MS);
  closeBtn.addEventListener('click', hide);

  // ESC closes when focused inside
  el.addEventListener('keydown', (ev)=>{ if(ev.key==='Escape') hide(); });
})();
</script>
10

I hate them; they are annoying as hell. It is user-hostile.

11

All the news sites I used to like have an annoying popup which makes the site un-usable on my phone. Then many want you to turn off all blockers which is not an easy click hence they can make it more annoying to use the site.

I absolutely will not use sites with popups. If you have to jump in front of my car to get my attention I’m running you over :wink:

Sorry @MichaelDroste. You are doing great work with Elements, but you will find most Internet geeks will be against a popup, hence the reason developers have a checkbox in the settings.

12

How about this? It slides in. once a week it shows one time and if it’s dismissed, it doesn’t show again for another week and these are little slide ins at the bottom, right hand corner of the screen.

13

I prefer that sliding style. I also prefer a statement along the lines of “We’re required to do this because of the silly and often contradictory privacy standards that seemingly every jurisdiction on the planet seems to want us to show you…”

3 Likes