Join the Webstudio community

Updated 2 months ago

Can we create popup on pageload?

At a glance

The community member is looking for a marketing image that can pop up and be closed with a button, such as a classic popup window or top bar. However, other community members suggest that popup windows are generally considered a bad user experience pattern. One community member suggests using a radix dialog instead, providing sample code to implement it. Another community member notes that something opening on load may not be the most accessible approach for dialogs, and that an overlay might be a better solution than a dialog.

Useful resources
I need just a marketing image that will pop up and can be closed on button. Classic popup window or top bar...
J
J
O
5 comments
Is a popup window truly necessary? This has been proven a bad pattern (most of the time) for years now. https://www.nngroup.com/articles/popups/
OK. But lets say I would like to practice a bit of sadomasochism. Can I create popup in webstudio?
I used AI to help figure this out, you'll need to test all your accessibility and might want to change the selector to use an ID.

  1. Add radix dialog
  2. Add html embed
  3. Add this to the the embed:
<script type="module">
window.addEventListener('load', () => {
const triggerButton = document.querySelector('button[aria-haspopup="dialog"][data-state="closed"]');

if (triggerButton) {
triggerButton.setAttribute('aria-expanded', 'true');
triggerButton.setAttribute('data-state', 'open');

// Optionally, you can trigger a click event for any additional event listeners
triggerButton.click();
}
});
</script>
  1. Publish
you should be able to trigger a click on the button that is opening a radix dialog

on the related note, I don't think from accessibility standpoint something that opens on load even considered correct approach for dialogs and such
its probably more like just an overlay and that's it, not a dialog
Add a reply
Sign up and join the conversation on Discord
Publish","dateCreated":"2024-10-19T19:20:00.480Z","dateModified":"2024-10-19T19:20:00.480Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/6c66325d-fff8-43a2-b97e-549275813461","name":"Jeremy","identifier":"6c66325d-fff8-43a2-b97e-549275813461","image":"https://cdn.discordapp.com/avatars/383871071566430208/6de448190b31c7a9af49e5fbd4f5d047.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"you should be able to trigger a click on the button that is opening a radix dialogon the related note, I don't think from accessibility standpoint something that opens on load even considered correct approach for dialogs and such","dateCreated":"2024-10-19T19:29:43.570Z","dateModified":"2024-10-19T19:29:43.570Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"its probably more like just an overlay and that's it, not a dialog","dateCreated":"2024-10-19T19:29:59.194Z","dateModified":"2024-10-19T19:29:59.194Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/c16fb2d0-3811-4ba8-a875-46f5f1d283e9","name":"JBozo","identifier":"c16fb2d0-3811-4ba8-a875-46f5f1d283e9","image":"https://cdn.discordapp.com/avatars/1021354182256627823/b281e34ec3e2e87798fc9330606c3560.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]