SolidJS•2y ago

Modal Implementation

Has anyone ever written a generic component for a modal? Something lean and not an external UI framework is enough for me. I heard the <portal> component is quite useful for this. Background is that I want/need to implement a small DSGVO modal.

6 Replies

Unknown User•2y ago

Message Not Public

thisbeyond•2y ago

I roughly do this in a modals component:

  const isOpen = () => api.getActiveModal() !== null;

  return ( 
     <Show when={isOpen()}>
        <ModalOverlay ref={element} onClick={onClick}> 
             <Dynamic {...(api.getActiveModal())} /> 
       </ModalOverlay> 
     </Show>
 )

  const isOpen = () => api.getActiveModal() !== null;

  return ( 
     <Show when={isOpen()}>
        <ModalOverlay ref={element} onClick={onClick}> 
             <Dynamic {...(api.getActiveModal())} /> 
       </ModalOverlay> 
     </Show>
 )

Unknown User•2y ago

Message Not Public

thisbeyond•2y ago

I then set modal in a shared context from anywhere in the app.

Unknown User•2y ago

Message Not Public

thisbeyond•2y ago

Yeah, this is rough and ready approach if you don't want lots of functionality / animation.

Gaming

Programming

Modal Implementation