0

So, right now I have this clean CSS based popup, that opens on the link click.

My question is, is it possible to open it on the mouse move (anywhere on the page).

I'm trying to achieve so that only real humans with a mouse movement will open it up. And bots, crawlers, that don't do that, will not.

If it's not possible, then open it on a page load?

I would like to have a non jQuery solution.

If non jQuery is impossible, then using jQuery will work, but open the same CSS popup that I have.

Any help would be appreciated.

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>div {
  width: 370px;
  position: relative;
  margin: 10% auto;
  padding: 27px 22px 14px 22px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 0px 13px 3px #555;
}
<div id="pop" class="modalDialog">
  <div>
    <p>PopUp Content</p>
    <a href="#">close</a>
  </div>
</div>

<a href="#pop" id="myBtn">Open popup</a>
ricard0
  • 47
  • 7
  • You should put jQuery out of mind and simply use JavaScript. jQuery is fast becoming an obsolete library, and certainly isn't necessary for something so simple as this. – isherwood Oct 08 '21 at 16:16
  • Isn't "opening on page load" the same as just not hiding it in the first place? Wouldn't a mouse movement _anywhere_ have the same effect? I'm not sure what you're trying to do here from a UX perspective. – isherwood Oct 08 '21 at 16:21
  • 1
    As for moving mouse anywhere, I'm trying to achieve so that only real humans with a mouse movement will open it up. And bots, crawlers, that don't do that, will not. Can I ask, where is the 'hiding' part I should remove to make it load on a page load? – ricard0 Oct 08 '21 at 16:23
  • Well, you have opacity set to 0. Removing that would do it. :) – isherwood Oct 08 '21 at 16:26
  • You should add that information to the question. I'm not sure how opening it on page load achieves that objective, though. – isherwood Oct 08 '21 at 16:28
  • Ok, so I removed the opacity and now it does show on page load. But I can't close it... For 'close' button to work, I need to click on the Open Popup link... Any suggestions..? – ricard0 Oct 08 '21 at 16:34
  • https://jsfiddle.net/#&togetherjs=tjcbfCtPBV – ricard0 Oct 08 '21 at 16:38
  • I really don't have suggestions. I never embraced CSS-only modals because they're a pain. A few lines of JavaScript make life much easier. Good luck. – isherwood Oct 08 '21 at 16:39
  • ok, can you point me to the right direction with JavaScript? I woudld really appreciate it. – ricard0 Oct 08 '21 at 16:42
  • [Mouse move events](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) | [Show & hide elements](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) – isherwood Oct 08 '21 at 16:44
  • Is it possible to fire a JavaScript click `Open popup` event on mouse move? – ricard0 Oct 08 '21 at 16:51
  • 1
    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click – isherwood Oct 08 '21 at 17:52

0 Answers0