Question

我正在编写一个Win Universal App（JS）并实施了一个Flyout。通过工具栏中的按钮访问弹出窗口。弹出代码 -

<button data-win-control="WinJS.UI.Command" data-win-options="{
        id:'cmdChangeCategory',
        label:'Change Category',
        section:'selection',
        type:'flyout',
        icon:'video',
        tooltip:'Change Category',
        flyout:'changeCatFlyout'}"></button>

Flyout div -

<div id="changeCatFlyout" data-win-control="WinJS.UI.Flyout">
    <label for="ddlChangeCategory" style="display:block;clear:both;margin-top:10px">Select Category</label>
    <select id="ddlCategoryChange"></select>
    <button id="btnChangeCategory" title="Change" style="display:block;clear:both;margin-top:10px">Change</button>
</div>

当单击按钮并且看起来很好时会显示弹出窗口，问题是弹出窗口内的控件无法与之交互（下拉列表是通过JS填充的）。每当我尝试单击下拉列表或按钮时，弹出按钮就会关闭。我已经尝试将弹出窗口作为身体的直接孩子，因为我在其他地方看到这是一种可能的解决方案。

任何想法???

我应该在WinJS Playground作品中加入尝试 - 让我感到沮丧!!

Answer 1

Flyout应该是document.body的直接子女。确保飞出不会嵌套在其他div中。

Answer 2

我不知道这是否与您的问题相同，但我想我会发表评论以防其他人遇到与我相同的问题。

基本上我把这个小提琴放在一起就像我的代码一样：https://jsfiddle.net/reko91/yg0rs4xc/13/

注意css：

#wholeContainer {
  position: fixed;
}

由于此wholeContainer是所有内容的容器，position:fixed;正在干扰弹出窗口中元素的click事件。我将其更改为absolute，它再次完美运行：）

更新了小提琴：https://jsfiddle.net/reko91/yg0rs4xc/14/

希望能帮助某人：）

Answer 3

请参阅this answer by THETODD。

基本上问题是你需要在父母固定DIV的外部定义你的data-win-control =“WinJS.UI.Menu”部分。似乎你不能定位：修复一个DIV然后位置：修复另一个内部并期望弹出窗口适用于所有浏览器（在IE中工作..哈）。 WinJS.UI.Menu也试图定位：fixed。

所以......

<div id="aMenuBar" style="position:fixed">
  <button id="settingsButton" class="win-button">Settings</button>
</div>

<!-- this part cannot be in the fixed div above -->
<div id="settingsFlyout" data-win-control="WinJS.UI.Menu">
  <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:alwaysSaveMenuItem',label:'Always Save Drafts',type:'toggle',selected:'true'}"></button>
</div>

WinJS Flyout保持关闭 - 无法点击控件

3 个答案: