External Modal opened from Hype

Using JavaScript with Hype
1

Hello,

please help:

I’d like to run external Modal via the Hype link

Modal is created using external html and JavaScript (in wordpress)

In html modal is opened with a button, this button has the id of the Modal element saved –option A

example A: https://tt.pl/testowy/testa/

or the button has an id or .style (defined in JavaScript) - option B

example B: https://www.tt.pl/kreacja/testb/

I enter the modal id address or assign a style to buttons in Hype, import as OEM to wordpress - unfortunately Hype buttons do not work (also through innerHTML)

please give me a hint how to activate them

best regards
Tomasz T.

test A B.hype.zip (21.4 KB)

2

You are using Oxygen and have set the data-trigger-selector="#buttton" … as this is a ID your using to trigger the modal there can only be one trigger per page as ID’s must be unique. If you need more then one trigger use a class based trigger.

Also, don’t use HTML Widget to embed HTML… just double click a rectangle or group and use the small pencil.

Hope that helps

3

Thank you for the tips
using a class trigger helped a little :wink: (for Oxygen)

but currently the Modal call with the Hype button once works, once does not work

https://www.tt.pl/kreacja/testb/

after loading a new Hype into wordpress I need to refresh my browser (Safari,Chrome) a few times to trigger Hype to work

in Firefox it doesn’t work at all, neither does it in mobile versions

is this problem more Oxygen, Wordpress or OEM file?

Best regards

Tomasz T.

4

No it’s a loading and timing issue. The init for Oxygen works on the jQuery(document).ready and Hype is lazy loaded. The way that Oxygen does it, it’s not easily allowing developers to re-run some function to scan the page again for newly added triggers. So, my suggestion would be just add the trigger to some invisible button/link on the page (outside Hype) like Oxygen expects it and trigger that button once Hype is running from within Hype by delegating the click with JS.

document.getElementById("myTriggerButtonId").click();
5

adding js to the Hype button has helped, it works now - thank you very much for your help

best regards

1 Like
6

Your welcome