Windows Store apps

The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Quickstart: Adding a flyout (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This Quickstart explains how to create and style a flyout. (Windows only)

Prerequisites

Building your first Windows Windows Store app with JavaScript

Guidelines and checklist for flyouts

1. Create a flyout

In this example, when the user presses the Buy button, a flyout appears above the button. A flyout is a control in the Windows Library for JavaScript, WinJS.UI.Flyout, and should be the direct child of the <body> element.

HTML


<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>

JavaScript


// 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. Style the flyout.

You can keep the standard styling of the Light and Dark UI themes, shown here, or customize the styling, as we'll show next.

A Flyout in the light style

A flyout in the dark style

There are a number of CSS properties for flyouts that you can customize.

Property	Example
Font-family Controls the font of the text	`font-family:'Segoe UI';`
Font-size Controls the size of the text	`font-size:9pt;`
Color Controls the color of the text	`color:rgb(0, 0, 0);`
Background-color Controls the background color of the face	`background-color:rgb(255, 255, 255);`
Border Controls the thickness, color, and line style of the border	`border:2px solid rgb(128, 128, 128);`
Max-width Controls the maximum width of the box	`max-width:400px;`

This example is from the HTML flyout control sample and depends primarily on the default styling.

CSS


    /* 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;
    }

This example goes a bit further with the more obvious visual elements, but is pretty ugly.

CSS


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

A styled flyout

Summary

In this Quickstart you created and styled a flyout in response to a user action.

Quickstart: Adding a flyout (HTML)

Prerequisites

1. Create a flyout

2. Style the flyout.

Summary

Related topics