Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal not appearing

See original GitHub issue

I have the code set up like the examples given:


@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Blazored
@using Blazored.Modal
@using Blazored.Modal.Services


@inherits LayoutComponentBase

<div class="header">
        <LoginDisplay />
<hr class="accent" />

<div class="px-4 container mt-2">
<BlazoredModal />


@page "/"
@namespace TicketingSolutions.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link href="~/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
    <link href="~/css/blazored-modal.css" rel="stylesheet" />
    @*<link href="~/css/all.min.css" rel="stylesheet" />*@
    <div id="app">
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))

    <script src="~/js/bootstrap.min.js"></script>
<script src="_framework/blazor.server.js"></script>
<script src="" crossorigin="anonymous"></script>
@*<script defer src="~/js/all.min.js"></script>*@


Origin Component: (truncated for brevity)

@inject IModalService Modal

<td class="align-text-top calendar-click" @onclick="@(() => SubmitDate(date))">@Date</td>

private void SubmitDate(DateTime date)
        var parameters = new ModalParameters();
        parameters.Add("Date", date);

        var options = new ModalOptions()
            Position = "blazored-modal-center"

        Modal.Show<Submit>("Submit Date", parameters);

Submit.razor (modal component)

@using TicketingSolutions.Models
@inject IModalService ModalService


@code {
    [CascadingParameter] ModalParameters Parameters { get; set; }

    private RepActivitySubmission repActivitySubmission { get; set; }

    protected override void OnInitialized()
        repActivitySubmission = new RepActivitySubmission();

    private void Cancel()


When I press the table cell in the originating component, nothing happens. When I add a breakpoint to the OnInitialized method, it runs, but nothing ever appears.


Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:18 (6 by maintainers)

github_iconTop GitHub Comments

arumfordcommented, Dec 16, 2019

I think I’ve found an issue. blazored-modal.css is empty


chrissaintycommented, Dec 14, 2019

@arumford Have you done a hard refresh on your browser or cleared the cache to make sure that is not an issue? Otherwise, could you provide a screenshot or a repro of the issue?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap modal not displaying
It was most likely to cause due to same css class name somewhere in loaded CSS. Therefore, instead of defining modal class as...
Read more >
Modal not showing 5.7 - Bug Reports
I make a button to open the modal when i click the button modal not showing on preview . The only way i...
Read more >
Modal not showing : r/bootstrap
Modal not showing. Hey! This is my first post here. I usually code in Python, where make small flask projects(websites) that's when i...
Read more >
Modal not showing when used with Bootstrap V4 · Issue #280
I can confirm the issue and the workaround. With Boostrap 4.0.0-alpha.6, calling the open method makes the application appear to hang, scrolling ...
Read more >
Bootstrap Modal Not showing
I'm trying to use bootstrap modal for editing/updating data, the first modal I created worked, but the second one that I had created...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found