如何在 Blazor PWA 应用程序中创建模式/通知弹出窗口？

Question

我想在 Blazor 应用程序中创建模式弹出窗口或 toast 通知，我尝试实现 blazor 模式，但它给了我错误并且没有显示，我只想在按下某个按钮时显示文本，排序就像 $"Hello this is your {code}"，我应该插入一个从我的数据库中获取的代码值。即使是一个简单的 html 弹出窗口对我来说也很好。

private async void SMSCodePopUp()
{

    var smstext = Guid.NewGuid().ToString("n").Substring(0, 4);
    var token = Guid.NewGuid().ToString("n").Substring(4, 9);

    await SweetAlertServ.FireAsync(new SweetAlertOptions
        {
            Title = "Confirmation",
            Text = $"SMS Code {smstext}",
            Icon = SweetAlertIcon.Warning,
            ShowCancelButton = true,
            ConfirmButtonText = "Got It"
        });


}

Answer 1

对于那些也需要这个的人，我刚刚使用了 Bootstrap ModalDialog

@if (confirmation)
{
    <div class="modal" tabindex="-1" role="dialog" style="display:block">
        <div class="modal-dialog text-center" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h5 class="modal-title tex-center">SMS Code</h5>
                </div>
                <div class="modal-body text-center">
                    <h5>@smstext</h5>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-success" data-dismiss="modal" @onclick=ConfirmClose>Close</button>
                
                </div>
            </div>
        </div>
    </div>
}

@code {


    private bool confirmation = true;

    string smstext = Guid.NewGuid().ToString("n").Substring(0, 4);


    private void ConfirmClose()
    {
        confirmation = false;
    }
}