https://github.com/brianlparker/howtomodal
https://github.com/brianlparker/howtomodal
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/brianlparker/howtomodal
- Owner: BrianLParker
- Created: 2021-06-01T08:04:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-26T08:54:24.000Z (almost 5 years ago)
- Last Synced: 2025-01-20T08:08:57.863Z (over 1 year ago)
- Language: HTML
- Size: 297 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# How To Modal
I see a lot of posts on stack exchange with people in a mess with modals.
They are a fundamentally just html and css. There is no need to call JavaScript or install some bloated library just for a modal.
Essentially they are just a div that covers your existing page and shows content in the centre (usually).
In this project I capture the render fragment for the modal and via service send it to the layout for display to achieve the html hierarchy I need to blur the background.
In html the blur filter effect is applied to an element and blurs all of its contents. This is why it is necessary to push the render fragment to layout, to get it outside the blur.
Even though I'm using this technique you can still interact with the modal contents as you would any other component on the page it came from no special handling.
I takes a little work to set it up, in the end you will have a reusable modal component that not only looks good but is easy to use.
**Package install**
`Install-Package BlazorModals -Version 1.0.0.1`
**Provide the service for injection:**
```
builder.Services.AddScoped();
```
**_Imports.razor**
```
@using BlazorModals.Models
@using BlazorModals.Views.Components
```
**Wrap your layout with the Modal Launcher component**
```
@inherits LayoutComponentBase
...
```
**Basic Modal Usage:**
```
modal.ShowModal()"
class="btn btn-primary" >Show Modal
@code {
private Modal modal;
private void Modal1Closed(ModalCloseState modalCloseState)
=> Console.WriteLine($"ModalCloseState : {modalCloseState}");
}
```
**Template Modal Usage:**
```
-
@someModel.Name
OpenModal(someModel)"
class="btn btn-primary btn-sm">edit
@foreach (var someModel in someData)
{
}
@code {
private TemplateModal modal;
private SomeDataModel currentModel;
private IEnumerable someData;
protected override void OnInitialized()
=> someData = LoadData();
private void OpenModal(SomeDataModel data)
{
currentModel = data;
var temp = new SomeDataModel();
CopyModel(data, temp);
modal.ShowModal(temp);
}
private void ModalClosed(ModalResult modalResult)
{
if(modalResult.CloseState == ModalCloseState.Ok)
{
CopyModel(modalResult.Value, currentModel);
StateHasChanged();
}
}
private void CopyModel(SomeDataModel source, SomeDataModel dest)
{
// use a clone method or copy the properties.
}
}
```
**The Buttons**
```
Close
Save changes
```
They capture styling:
```
Close
Save changes
```
**Modal Parameters**
| Paramater | Type | Default | |
|--|--|--|--|
| Background | string | #00000077 | The colour of the background. For example "#0000ff77" for tanslucent blue|
| BlurPixels | int | 5 | The quantity of blur pixels
| AllowBackgroundClick | bool | true | When true clicking on the background closes the modal.
```
```