Winjs飛出屏幕中心

Question

當我點擊一個按鈕時，Flyout將出現在我點擊的按鈕頂部進行確認。

我嘗試這樣做：

flyout.alignment="center" 

，但比對通過該按鈕。我想在我的屏幕中央顯示我的飛出物。我在問這是否可行Winjs.UI.Flyout

Answer 1

Flyout始終與作爲第一個參數傳遞的元素對齊。如果您需要將彈出窗口與元素對齊但位於屏幕中央，則可以通過在屏幕中央放置隱藏元素並將彈出窗口與其對齊來完成。

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