Top pop a window to the top of the WebGL view

How to draw a window to the top of the WebGL view ?

This post is related to this thread about the Input.Acceleration access from webGL :
- https://forum.unity.com/threads/can-webgl-access-mobile-sensors.332566/#post-7464649

To trigger the Device Sensor Permission dialog from the Javascript, it requires to be called in a handler triggered by a user gesture.
This can't be faked / triggered by script or it will callback an error from Safari iOS.

Several users talking about it here :
- https://github.com/aframevr/aframe/issues/4287

Someone is sharing nice code to get a modal view into the page and then trigger the request from the .onclick() button :
- https://codepen.io/dav1app/pen/MWWOKar

As you can see on the attached screenshot, I made the integration to my html page but it shows up behind the webGL view.

I also tried to edit the *.css adding the z-index: 999
as mentioned here :
- https://stackoverflow.com/questions/21386306/css-always-on-top/21386429

But it doesn't work and remind behind.

I was first testing adding a static button to the index.html, easier to work and get it triggered.
However for release I need it full Unity supported and I have to show that extra (pink) window to the top of the WebGL view.

Any idea?
Is that even possible?

Thank you!

 

Found a solution....

You know that annoying warning message on Mobile which let you know webgl is not supported on this device?


Well, just hack it and use it :


Here the sweet code :

Code (javascript):

1. function ShowUnityWebglViewOverlayPrompt(msg, onValid, onCancel) {
2.     var warningBanner = document.querySelector("#unity-warning");
3.     div = document.createElement('div');
4.     warningBanner.appendChild(div);
5.     updateBannerVisibility();
6.  
7.     var html = '<div class="DeviceMotionRequestBanner">'
8.         + '<link rel="stylesheet" href="DeviceMotionRequestBanner.css">'
9.         + '<h3>This game requires to access your DeviceMotion.</h3>'
10.         + '<p>This app requires you to enable the DeviceMotion event on yout device.</p>'
11.         + '<button id="EnableBtn">Enable</button> <a id="CancelBtn" href="#">Cancel</a>'
12.         + '</div>';
13.  
14.     div.innerHTML = html;
15.  
16.     const btnEnable = document.querySelector("#EnableBtn");
17.     btnEnable.addEventListener("click", function () {
18.         onValid();
19.         hide();
20.     });
21.  
22.     const btnCancel = document.querySelector("#CancelBtn");
23.     btnCancel.addEventListener("click", function () {
24.         onCancel();
25.         hide();
26.     });
27.  
28.     function updateBannerVisibility() {
29.         warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
30.     }
31.  
32.     function hide() {
33.         warningBanner.removeChild(div);
34.         updateBannerVisibility();
35.     }
36. }

Cheers