模态框

本文档详细介绍了 abp-modal 标签助手，它简化了模态对话框的 HTML 标记构建。请阅读该文档了解如何使用模态框。

简介

abp-modal 是创建模态框的主要元素。

基本用法：

<abp-button button-type="Primary" data-bs-toggle="modal" data-bs-target="#myModal">启动模态框</abp-button>

<abp-modal centered="true" scrollable="true" size="Large" id="myModal">
   <abp-modal-header title="模态框标题"></abp-modal-header>
   <abp-modal-body>
       哇哦，您正在模态框中阅读这段文字！
   </abp-modal-body>
   <abp-modal-footer buttons="Close"></abp-modal-footer>
</abp-modal>

演示

查看模态框演示页面以查看实际效果。

属性

centered

指示模态框定位的值。应为以下值之一：

false（默认值）
true

scrollable

指示模态框是否可滚动的值。应为以下值之一：

false（默认值）
true

size

指示模态框大小的值。应为以下值之一：

Default（默认值）
Small
Large
ExtraLarge

static

指示模态框是否为静态的值。应为以下值之一：

false（默认值）
true

附加内容

abp-modal-footer 可以包含多个按钮并支持对齐选项。

在页面中添加 @using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal。

示例：

<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">启动模态框</abp-button>

<abp-modal centered="true" size="Large" id="myModal" static="true">
    <abp-modal-header title="模态框标题"></abp-modal-header>
    <abp-modal-body>
        哇哦，您正在模态框中阅读这段文字！
    </abp-modal-body>
    <abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)" button-alignment="Between"></abp-modal-footer>
</abp-modal>

button-alignment

指示模态框底部按钮对齐方式的值。应为以下值之一：

Default（默认值）
Start
Center
Around
Between
End

模态框

简介

演示