Using Blazor and Blazorstrap, typically when the server disconnects, an "Error" message is displayed. However, with the BsModal from Blazorstrap, it appears in the background layer, making it unresponsive. How can this be fixed? Is it possible to close the BsModal in such situations?
_Host.cshtml
<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
<p>
attempting to connect to server
</p>
<a href="" class="reload">Reload</a>
</div>
<div class="failed">
<p>
failing to connect
</p>
<a href="" class="reload">Reload</a>
</div>
<div class="rejected">
<p>
refused
</p>
<a href="" class="reload">Reload</a>
</div>
</div>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
referenced here
modals.razor
@page "/modals"
@using BlazorStrap
<h1>Modals</h1>
<h3>Live Demo</h3>
<h3>Vertically Centered</h3>
<div class="docs-example">
<BSButton Color="Color.Primary" @onclick="@onToggle">Launch demo modal</BSButton>
<BSModal @ref="VerticallyCentered" IsCentered="true">
<BSModalHeader OnClick="@onToggle">Modal title</BSModalHeader>
<BSModalBody><p>Modal body text goes here.</p></BSModalBody>
<BSModalFooter>
<BSButton Color="Color.Secondary" @onclick="@onToggle">Close</BSButton>
<BSButton Color="Color.Primary" @onclick="@onToggle">Save Changes</BSButton>
</BSModalFooter>
</BSModal>
</div>
@code { BSModal VerticallyCentered { get; set; }
bool IsOpen { get; set; }
void onToggle(MouseEventArgs e)
{
VerticallyCentered.Toggle();
}
void OpenChenged(bool b)
{
System.Diagnostics.Debug.Write(b);
} }