Share via

快速入门：添加浮出控件 (HTML)

  • 项目

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

此快速入门介绍如何创建弹出窗口和设置弹出窗口样式。（仅限 Windows）

先决条件

使用 JavaScript 构建你的第一个 Windows 应用商店应用

弹出窗口的指南和清单

1. 创建弹出窗口

在以下示例中，当用户按下“Buy”按钮时，会在该按钮的上方出现一个弹出窗口。弹出窗口是 Windows JavaScript 库中的控件 WinJS.UI.Flyout，并且必须为 <body> 元素的直接子项。

<body>
    <!-- Button that launches the confirmation Flyout. -->
    <button class="action" id="buyButton">Buy</button>

    <!-- Confirmation Flyout. -->
    <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm purchase flyout}">
        <div>Your account will be charged $252.</div>
        <button id="confirmButton">Complete Order</button>
    </div>
<body>

// Initialize WinJS controls.
WinJS.UI.processAll();

// Initialize event listeners.
document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false);
document.getElementById("confirmButton").addEventListener("click", confirmOrder, false);

// Command and Flyout functions.
function showConfirmFlyout() {
    showFlyout(confirmFlyout, buyButton, "top");
}
function showFlyout(flyout, anchor, placement) {
    flyout.winControl.show(anchor, placement);
}
function confirmOrder() {
    document.getElementById("confirmFlyout").winControl.hide();
}

2. 设置弹出窗口样式。

你可保持标准的浅色和深色 UI 主题样式设置，如下所示，或者自定义样式设置，我们接下来将会对此作出介绍。

使用浅色样式的弹出窗口

使用深色样式的弹出窗口

 

存在多个可为弹出窗口自定义的 CSS 属性。

属性 示例

Font-family

控制文本字体

 font-family:'Segoe UI';

Font-size

控制文本大小

 font-size:9pt;

Color

控制文本颜色

 color:rgb(0, 0, 0);

Background-color

控制外观的背景颜色

 background-color:rgb(255, 255, 255);

Border

控制边框的厚度、颜色和线条样式

 border:2px solid rgb(128, 128, 128);

Max-width

控制对话框的最大宽度

 max-width:400px;

 

此示例取自 HTML 浮出控件示例，主要取决于默认样式。

    /* Flyout title. */
    .win-flyout:not(.win-menu) .win-type-x-large
    {
        font-weight: 300;
        margin-top: -13px;
        padding-bottom: 18px;
    }

    /* Flyout buttons. */
    .win-flyout:not(.win-menu) button,
    .win-flyout:not(.win-menu) input[type="button"]
    {
        margin-top: 16px;
        margin-left: 20px;
        float: right;
    }

此示例展示的视觉元素更加清晰，但很不美观。

    /* Flyout with attent-getting colors. */
    .win-flyout
    {
        background-color: yellow;
        border-color: red;
        color: green;
    }

已设置样式的弹出窗口

摘要

在此快速入门中，你创建了用来响应用户操作的弹出窗口并为其设置了样式。

相关主题

WinJS.UI.Flyout

HTML 浮出控件示例