Question

当我点击一个按钮时，会在我刚刚点击的按钮顶部显示一个弹出按钮进行确认。

我试过了：

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

Winjs Flyout位于屏幕中央

1 个答案: