快速入门:添加浮出控件 (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;
}
摘要
在此快速入门中,你创建了用来响应用户操作的弹出窗口并为其设置了样式。