# Popup trigger onload window

**URL:** <https://forum.pinegrow.com/t/popup-trigger-onload-window/6157>\
**Category:** Javascript\
**Created:** [January 14, 2022, 1:55pm UTC](https://forum.pinegrow.com/t/popup-trigger-onload-window/6157 "2022-01-14T13:55:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mickael](https://avatars.discourse-cdn.com/v4/letter/m/f04885/32.png) [@Mickael](https://forum.pinegrow.com/u/Mickael)\
**Post date:** [January 14, 2022, 1:55pm UTC](https://forum.pinegrow.com/t/popup-trigger-onload-window/6157/1 "2022-01-14T13:55:36Z")

</div>

Bonjour.

I need to trigger a popup when the mouse leaves the window. I was inspired by the [pinegrow doc](https://pinegrow.com/tutorials/working-with-bootstrap-modals/)  
I think it comes from the jquery script that I don’t understand all 😉

```auto
<script data-toggle="modal" data-target="#exit">
      function openModal() {
        $(window).bind('unload').modal();
  };
</script>

```

Thanks for your help !

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 14, 2022, 4:05pm UTC](https://forum.pinegrow.com/t/popup-trigger-onload-window/6157/2 "2022-01-14T16:05:35Z")

</div>

What you want can be little annoying to the users, so think about using it.

But to let you know that we can use PG Interactions in more advance way as well.

In the document you mentioned, says to apply script as below

```auto
<script>
  function openModal() {
    $('#thumb_one').modal();
  };
</script>

```

So first place this script somewhere in your page or to the linked JS file.

This means if we can run **openModal** function our modal will popup. We can do it with some more custom JS but we use PG Interaction so that we don’t have to write any more code.

- For this you can add an Interaction on the body
- On **Trigger** go to **Mouse only** and select **Mouseleave**  
(Here I’m selecting **Mouse only** because I’m not targeting touch device for this interaction because it will be popping all the time, you can test that yourself)
- Now click on **Edit Animation** , on the timeline editor add a transition and select **Set**
- Set **Position** as **0**
- Now click on **Add property** \> **Interactions** and select **On complete**
- Now for **On complete** enter the function name **openModal**

Now hover over your page/body and the hover out of it and your modal should popup.

Please try this and let me know if you encounter anything.

---

<div class="post-metadata">

**Author:** ![Mickael](https://avatars.discourse-cdn.com/v4/letter/m/f04885/32.png) [@Mickael](https://forum.pinegrow.com/u/Mickael)\
**Post date:** [January 18, 2022, 3:42pm UTC](https://forum.pinegrow.com/t/popup-trigger-onload-window/6157/3 "2022-01-18T15:42:45Z")

</div>

OK, thank you very much for these insights.  
You are right. It is not very pleasant for the user, but it is a request…

I have two problems:

- I selecting **Mouse only** but it will be popping all onclick in the body
- The popup does not open in Wordpress theme

Thanks for your support

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 19, 2022, 2:06pm UTC](https://forum.pinegrow.com/t/popup-trigger-onload-window/6157/4 "2022-01-19T14:06:50Z")

</div>

On **Trigger** if you’ve chosen **Mouse only** and selected **Mouseleave** then it should act on mouse leave. If it is acting on click then please check your settings.

And about popup not opening on WordPress, I cannot be very sure but if you’ve exported WP theme properly it will act in the same way as it works on normal HTML. Exporting shouldn’t change anything on the interactions unless if there is change is your target element on the WordPress side.