Currently working in a Blazor web application and encountering an issue while using a Bootstrap Modal. I have it set up so that clicking a button in the main component displays a Modal popup with a LineChart component. For some reason this Modal completely overlays the screen, I want the backdrop to be transparent but have been unable to make this happen. I have tried setting properties on the Modal object and messed around with some CSS(CSS Isolation is configured) but so far have not had any success. I figured it may be because of the LineChart component but removing that component did nothing. Looking for a way to hide the modal background so that only the content portion is visible.
Button and modal call in main component:
<td><Button Color="ButtonColor.Primary" @onclick="ShowPopup">Trends</Button></td><Modal @ref="modal" Size="ModalSize.ExtraLarge"/>ShowPopup()
private async Task ShowPopup() { List<string> monthsList = period.Months.ToList().Select(m => CultureInfo.CurrentCulture.DateTimeFormat.GetAbbreviatedMonthName(m.Month).ToUpper()).ToList(); Dictionary<string, List<double?>> salesChartData = GenerateSalesChartsData(); var parameters = new Dictionary<string, object>(); parameters.Add("dataDict", salesChartData); parameters.Add("XValues", monthsList); //Generate Modal with the Graph component await modal.ShowAsync<Graph>(title: "Sales For Given Season(s)", parameters: parameters); }Graph.razor:
<LineChart @ref="lineChart" Width="800" />@code {...}Example:Modal Popup