No video :(

DOMElement Dialog Modal - Is it the best?

Подписаться 8 тыс.

Просмотров 1,9 тыс.

50% 1

TLDR: In some ways I love it in some ways I hate it 🤣. Comment below what you think.
Love the baked in accessibility features like focus trapping, autofocus, and keyboard nav. Not crazy about some of the tricks to working with it in Webflow though!
// CLONE IT
👯‍♂️ try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
// TOPICS
00:00 Demo
00:43 Make it work
02:42 Add features: close button, backdrop
07:00 Animation with CSS Transitions
09:29 Put a form in it.

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@janneparri 9 месяцев назад

Cool stuff! Thanks for the tutorial! People are doing great stuff with DOM elements.

@hal-zeitlin 9 месяцев назад

Wow that was so satisfying

@heatherliu6856 9 месяцев назад

Finsweet Modal 😍😍😍

@jonasarleth 9 месяцев назад

I used this method before but always with the dialog in an embed. This is much more convenient.

@jonasarleth 9 месяцев назад

Ah and to edit the dialog content without adding the open attribute it would be possible to use a component.

@webbae 9 месяцев назад

Yes I tested using a component for this and it worked fine. I opted not to show the component workflow because it made the interior of the dialog less pleasant to work with. i.e. if one modal is just info and the other has a form. You could make it work with conditional visibility but my answer right now is to wait patiently for SLOTS. Can't wait!

@webbae 9 месяцев назад

My hope was that I could build a totally encapsulated modal component with all the behavior logic included (including no JS in the page settings) but I couldn't quite get it all the way there yet :(.

@kevynlevine 9 месяцев назад

Imma take your word for it on this one….😮

@webbae 9 месяцев назад

🤪

@AurelienSchibli 4 месяца назад

It works great but I'm having issues on mobile. I have an image and a form in my dialog for an optin. On mobile I can't see all the form fields, even with overflow auto. Any ideas? Is there a way to force a to be fullscreen on mobile?

@webbae 4 месяца назад

I’m not sure - can you share a link in discord so I can take a look at the css?

@AurelienSchibli 4 месяца назад

@@webbae Thanks for your reply. It actually ended up being an overflow issue on a parent div. You are a bloody legend btw.

@webbae 4 месяца назад

glad you got it 💯

@JesseShauffer 9 месяцев назад

Do these modal populations support cms?

@webbae 9 месяцев назад

sure you can stick CMS content in there.

@OSANDA_Design 9 месяцев назад

Can you do a video about how attribute work and in webflow ect..

@webbae 9 месяцев назад

sure I'd love to - can you expand on your question at all? What about attributes do you find confusing or curious to hear more about?

@OSANDA_Design 9 месяцев назад

Really appreciate the follow up 👍. I have no idea what attribute dose and what we can do with it.@@webbae

@sachinRao15 9 месяцев назад

Sometime webflow crashes if we fiddle more with the DOM element I'd rather wait webflow to official release it to us then create solution and products around it any thoughts on this senõr ✌️

@webbae 9 месяцев назад

Well I’d say it’s already officially released based on the fact that it’s in the API v2 docs so no use in waiting 😆 developers.webflow.com/reference/the-webflow-object I’ve also had mixed experiences with it crashing designer so totally see where you’re coming from 👍

@zehfred 9 месяцев назад

I find it crashes when trying to add children inside self-closing elements, like adding a inside an tag, for example, which obviously is invalid html.

@webbae 9 месяцев назад

@@zehfred got the same.

@johanvanwambeke723 9 месяцев назад

I dont like the page wide click listener, I would document.querySelectorAll('[some data property on button]').onclick -> Do the stuff. Or is there some reason it needs to be this way?

@webbae 9 месяцев назад

Are you concerned with performance? What don't you like about it? The reason I made it this way so that it supports multiple modals on page easily but as you mentioned querySelectorAll would do just fine as well. You'd have to work some logic in to how you select the associated dialog and close button elements such that you don't trigger the wrong one but it wouldn't be difficult!

@S-H-ex2uc 9 месяцев назад

Can we finally create a customisable age-gate with DOM? Great content as always 🤌

@webbae 9 месяцев назад

Thanks - can you explain your requirement a bit more with the age gate? What has limited you before?

@S-H-ex2uc 9 месяцев назад

More of a lack of technical knowledge/skill of how this element can be utilised on my part I think. I just want to create a yes/no gate that adds a cookie to the users browser rather than the typical 'enter date' gate, and hoped for a better solution using this new element. Cheers @@webbae