microsoft-metro - 画面中央の Winjs Flyout

Question

ボタンをクリックすると、クリックしたボタンの上部に確認用のフライアウトが表示されます。

私はこれを試しました：

 flyout.alignment="center" 

しかし、位置合わせはボタンによるものです。フライアウトを画面の中央に表示したいと考えています。これが可能かどうか尋ねていますWinjs.UI.Flyout

Answer 1

フライアウトは、最初のパラメーターとして渡された要素に対して常に配置されます。フライアウトを要素ではなく画面の中央に配置する必要がある場合は、非表示の要素を画面の中央に配置し、フライアウトをそれに合わせることで実現できます。

_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;
}