Blazor 自定义弹窗

在Web开发中，弹窗是一个常见的交互元素，它通常用于显示一些重要的信息或者需要用户进行确认的操作。
在Blazor框架中，我们可以利用Razor组件来轻松地创建自定义的弹窗组件。
下面是一个简单的示例，展示了如何创建一个基本的自定义弹窗。

首先，我们需要定义一个页面，这里我们使用了@page指令来指定页面的路由为/custom-dialog。

@page "/custom-dialog"  
@rendermode @(new InteractiveServerRenderMode(prerender: true))

然后，我们编写CSS样式来定义弹窗的外观。样式中定义了.custom-dialog作为弹窗的容器，.dialog-content作为弹窗内容，以及.dialog-button作为弹窗中的按钮。

<style>
    /* 弹窗容器的样式 */
    .custom-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    /* 弹窗内容的样式 */
    .dialog-content {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    /* 弹窗按钮的样式 */
    .dialog-button {
        margin-top: 10px;
        padding: 5px 10px;
        cursor: pointer;
    }
</style>

接下来，我们在页面上添加一个标题和一个按钮，用于触发弹窗的显示。

<h1>自定义弹窗示例</h1>

<button @onclick="ShowDialogEvent">显示弹窗</button>

使用@if条件语句，我们可以根据ShowDialog的值来决定是否显示弹窗。当ShowDialog为true时，弹窗会被渲染出来。

@if (ShowDialog)
{
    <div class="custom-dialog" @onclick:stopPropagation>
        <div class="dialog-content">
            这是一个自定义弹窗的内容。
        </div>
        <button class="dialog-button" @onclick="HideDialogEvent">关闭</button>
    </div>
}

注意到在弹窗的容器<div>上，我们使用了@onclick:stopPropagation，这是为了防止点击弹窗时触发父元素的点击事件。

最后，在@code块中，我们定义了ShowDialog属性以及两个事件处理方法HideDialogEvent和ShowDialogEvent。这两个方法分别用于隐藏和显示弹窗。

@code {

    public bool ShowDialog { get; set; }

    private void HideDialogEvent()
    {
        ShowDialog = false;
    }

    private void ShowDialogEvent()
    {
        ShowDialog = true;
    }
}

这个简单的示例展示了如何在Blazor中使用Razor组件来创建一个自定义的弹窗。
在实际开发中，我们可以根据需要扩展这个示例，比如添加更多的交互元素、动画效果等。通过使用Blazor，我们可以利用C#和Razor语法来构建富交互式的Web应用程序。

示例代码

CustomDialog.razor