C#•2y ago

✅ Blazor: Multiple Modals, different pages

Hello I have multiple modals that need to be in MainLayout.cs (otherwise they will not render as expected). Now I have also other pages, for example lets say Page1. Page1 can trigger a specific modal on button click. And it also need to take care of the actions that might happen in the Modal itself (e.g. Button Click). How would I structure this properly? Modal is a component:

<Modal @ref="newSocialMediaAccountModal">
    <input placeholder="Identifier" />
    
    <button>
        Save
    </button>
</Modal>

<Modal @ref="newSocialMediaAccountModal">
    <input placeholder="Identifier" />
    
    <button>
        Save
    </button>
</Modal>

needs to be in MainLayout but controlled by other pages.

21 Replies

Mayor McCheese•2y ago

Do you mean you have a modal you want to trigger from another page?

KroksOP•2y ago

Yes basically, but also like control it, like get all input values of it as C# variables, and control the button clicks for the buttons in that modal in the page that opens the modal

Mayor McCheese•2y ago

You need to use a template, if I understand you correctly.

KroksOP•2y ago

can you demonstrate it in a small example? or elaborate a bit

Mayor McCheese•2y ago

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/templated-components I was looking for a link Sorry I'm out and about right now

KroksOP•2y ago

Ok, im not sure if this really helps me. Can you leave me a ping once you arrive home? I will be unavailable for another hour or two now too. THen I can explain better again I think

Mayor McCheese•2y ago

Kk Might be a couple hours

KroksOP•2y ago

👍

Mayor McCheese•2y ago

But to give you an example, I made a multi select box using a control template, so the in place component gets a render fragment to explain how to render for the typeparam, example a user, or list of users. So for your modal you'd supply the needed events for your buttons, the modal content, etc in a similar way. So then your modal is consistent

blinkbat•2y ago

if you use the right css you can stick a modal pretty much anywhere, btw.

KroksOP•2y ago

That would be optimal xD, im not much into frontend so I will explain how it works currently. So this is the Main-Layout, all pages are loaded into "INNER". However if the modal is in one of the inner pages it just shows it there, and not over the entire page. I want it over the entire page so I store them at the top in MainLayout. Modal.razor (the design part):

@if(show) {
    <div id="popup-container" style="display:flex !important">
        <div class="popup" style="display:flex !important;">
            <span class="title" style="margin-bottom: 1rem;">@Title</span>
            @ChildContent
            <div class="horizontal-line"></div>
        </div>
    </div>
}

@if(show) {
    <div id="popup-container" style="display:flex !important">
        <div class="popup" style="display:flex !important;">
            <span class="title" style="margin-bottom: 1rem;">@Title</span>
            @ChildContent
            <div class="horizontal-line"></div>
        </div>
    </div>
}

Modal.razor.css:

#popup-container {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #00000096;
    backdrop-filter: blur(2px);
}

.popup {
    display: none;
    flex-direction: column;
    gap: 15px;
    position:absolute;
    background-color: var(--main-color);
    padding: 3rem;
    border-radius: 7px;
    min-width: 500px;
}

#popup-container {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #00000096;
    backdrop-filter: blur(2px);
}

.popup {
    display: none;
    flex-direction: column;
    gap: 15px;
    position:absolute;
    background-color: var(--main-color);
    padding: 3rem;
    border-radius: 7px;
    min-width: 500px;
}

blinkbat•2y ago

https://tailwindui.com/components/application-ui/overlays/modals I based mine on these

KroksOP•2y ago

I see, sadly cannot use tailwind for this project

blinkbat•2y ago

just translate the css using the docs.

KroksOP•2y ago

project too big already

blinkbat•2y ago

no i mean translate the tw to css <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">

KroksOP•2y ago

blinkbat•2y ago

-> position: relative; z-index: 10

KroksOP•2y ago

ah I see what you mean

blinkbat•2y ago

👍

KroksOP•2y ago

Perfect, got it working now. thank you guys

Gaming

Programming

✅ Blazor: Multiple Modals, different pages