Hi,
Please refer to the example as follow:
<!DOCTYPE html>
<html>
<head>
<title>flyout example</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- ListViewExample references -->
<script type="text/javascript" src="/flyout/default.js"></script>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<!-- <div style="height:90px;width:50px;"></div>-->
<!-- 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>
</html>
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll().then(function completed() {
// addEventListener
document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false);
document.getElementById("confirmButton").addEventListener("click", confirmOrder, false);
}));
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function showConfirmFlyout() {
showFlyout(confirmFlyout, buyButton, "top");
}
function showFlyout(flyout, anchor, placement) {
flyout.winControl.show(anchor, placement);
}
function confirmOrder() {
document.getElementById("confirmFlyout").winControl.hide();
}
app.start();
})();
Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact
msdnmg@microsoft.com
Microsoft One Code Framework
Flyout issue: no text show up
