{"id":21013970,"url":"https://github.com/brianlparker/howtomodal","last_synced_at":"2026-01-02T04:33:28.452Z","repository":{"id":136033345,"uuid":"372749697","full_name":"BrianLParker/HowToModal","owner":"BrianLParker","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-26T08:54:24.000Z","size":304,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-20T08:08:57.863Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BrianLParker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.paypal.me/BrianParkerCoffeeMe"]}},"created_at":"2021-06-01T08:04:08.000Z","updated_at":"2021-08-26T08:54:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a5aafa4-078d-4722-9f6a-daa93724e724","html_url":"https://github.com/BrianLParker/HowToModal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FHowToModal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FHowToModal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FHowToModal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianLParker%2FHowToModal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrianLParker","download_url":"https://codeload.github.com/BrianLParker/HowToModal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243438365,"owners_count":20290952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T09:44:40.902Z","updated_at":"2026-01-02T04:33:28.414Z","avatar_url":"https://github.com/BrianLParker.png","language":"HTML","funding_links":["https://www.paypal.me/BrianParkerCoffeeMe"],"categories":[],"sub_categories":[],"readme":"\n\n\n# How To Modal\n\n\n\nI see a lot of posts on stack exchange with people in a mess with modals.\n\nThey are a fundamentally just html and css. There is no need to call JavaScript or install some bloated library just for a modal.\n\nEssentially they are just a div that covers your existing page and shows content in the centre (usually).\nIn 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.\n\nIn 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. \n\nEven 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.\n\nI 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.\n\n**Package install**\n`Install-Package BlazorModals -Version 1.0.0.1`\n\n**Provide the service for injection:**\n```\nbuilder.Services.AddScoped\u003cIModalService, ModalService\u003e();\n```\n\n**_Imports.razor**\n```\n@using BlazorModals.Models\n@using BlazorModals.Views.Components\n```\n\n**Wrap your layout with the Modal Launcher component**\n```\n@inherits LayoutComponentBase\n\u003cModalLauncher\u003e\n   ...\n\u003c/ModalLauncher\u003e\n```\n\n**Basic Modal Usage:**\n```\n\u003cbutton @onclick=\"()=\u003emodal.ShowModal()\" \n        class=\"btn btn-primary\" \u003eShow Modal\u003c/button\u003e\n\n\u003cModal @ref=\"@modal\" OnClose=\"Modal1Closed\"\u003e\n    \u003cMyModalContent /\u003e\n\u003c/Modal\u003e\n\n@code {\n    private Modal modal;\n    private void Modal1Closed(ModalCloseState modalCloseState) \n        =\u003e Console.WriteLine($\"ModalCloseState : {modalCloseState}\");\n}\n```\n\n**Template Modal Usage:**\n```\n\u003cul class=\"list-group\"\u003e\n    @foreach (var someModel in someData)\n    {\n        \u003cli @key=someModel.Id class=\"d-flex flex-row list-group-item\"\u003e\n            \u003cdiv class=\"col-2\"\u003e  @someModel.Name\u003c/div\u003e\n            \u003cbutton @onclick=\"()=\u003eOpenModal(someModel)\" \n                    class=\"btn btn-primary btn-sm\"\u003eedit\u003c/button\u003e\n        \u003c/li\u003e\n    }\n\u003c/ul\u003e\n\n\u003cTemplateModal @ref=\"@modal\" \n               TContent=\"SomeDataModel\" \n               OnClose=\"ModalClosed\" \n               Background=\"#0000ff77\" \n               BlurPixels=\"3\" \u003e\n    \u003cSomeModelEditForm SomeData=\"@context\" /\u003e\n\u003c/TemplateModal\u003e\n\n@code {\n    private TemplateModal\u003cSomeDataModel\u003e modal;\n    private SomeDataModel currentModel;\n    private IEnumerable\u003cSomeDataModel\u003e someData;\n\n    protected override void OnInitialized() \n        =\u003e someData = LoadData();  \n\n    private void OpenModal(SomeDataModel data)\n    {\n        currentModel = data;\n        var temp = new SomeDataModel();\n        CopyModel(data, temp);\n        modal.ShowModal(temp);\n    }\n    \n    private void ModalClosed(ModalResult\u003cSomeDataModel\u003e modalResult)\n    {\n        if(modalResult.CloseState == ModalCloseState.Ok)\n        {\n            CopyModel(modalResult.Value, currentModel);\n            StateHasChanged();\n        }            \n    }\n\n    private void CopyModel(SomeDataModel source, SomeDataModel dest)\n    {\n        // use a clone method or copy the properties.\n    }\n}\n```\n\n**The Buttons**\n```\n\u003cModalCloseButton\u003eClose\u003c/ModalCloseButton\u003e\n\u003cModalOkButton\u003eSave changes\u003c/ModalOkButton\u003e\n```\n\nThey capture styling:\n```\n\u003cModalCloseButton type=\"button\" class=\"btn btn-secondary\" aria-label=\"Close\"\u003eClose\u003c/ModalCloseButton\u003e\n\u003cModalOkButton type=\"button\" class=\"btn btn-primary\"\u003eSave changes\u003c/ModalOkButton\u003e\n```\n\n**Modal Parameters**\n\n| Paramater  | Type  | Default  |  |\n|--|--|--|--|\n| Background | string | #00000077 | The colour of the background. For example \"#0000ff77\" for tanslucent blue|\n| BlurPixels | int | 5 | The quantity of blur pixels\n| AllowBackgroundClick | bool | true | When true clicking on the background closes the modal.\n```\n\u003cModal @ref=\"@modal\" \n             Background=\"#0088ff77\" \n             BlurPixels=\"3\" \n             AllowBackgroundClick=\"false\"\u003e\n ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianlparker%2Fhowtomodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianlparker%2Fhowtomodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianlparker%2Fhowtomodal/lists"}