Winjs Flyout in the center of the screen - microsoft-metro

Question

When I click on a button, a Flyout will appear for confirmation on the top of the button I have just clicked on.
I tried this :
flyout.alignment="center"
but the alignment is by the button. I want to show my flyout in the center of my screen. I'm asking if this is possible with Winjs.UI.Flyout

Answer 1

Flyout is always aligned wrt to the element passed as the first parameter. If you need to have the flyout not aligned to the element but at the center of the screen, it can be done by placing an hidden element at the center of the screen and aligning the flyout to it.
_oncmdclick: function oncmdclick(event)
{
// assume an element with class hidden in the page and placed at center of the screen
var hiddenElement = this.element.querySelector('.hidden');
var myFlyoutElement = ...; // myFlyoutElement is the flyout element
this.newItemFlyoutElement.winControl.show(hiddenElement, 'top', 'center');
},
html:
<div class="hidden" style="visibility: collapse"></div>
css:
// in this case, I had used 1x1 -ms-grid for the section of the page
.mypage.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
// center the hidden element in the page grid
.mypage.fragment section[role=main] .hidden
{
-ms-grid-column-align: center;
-ms-grid-row-align: center;
}