WinJS Flyout 不断关闭 - 无法单击控件答案

【问题标题】：WinJS Flyout keeps closing - controls cannot be clickedWinJS Flyout 不断关闭 - 无法单击控件
【发布时间】：2016-01-14 22:22:01
【问题描述】：

我正在编写一个 Win Universal App (JS) 并实现了 Flyout。 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>

弹出 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 填充）。每当我尝试单击下拉菜单或按钮时，弹出窗口就会关闭。我已经尝试让弹出 div 成为 body 的直接子元素，因为我在其他地方看到了这可能是一种解决方案。

有什么想法吗？？？

我应该在 WinJS Playground 作品中尝试这个 - 让我很沮丧！

【问题讨论】：

按钮所在的工具栏也是浮出控件吗？只有一个浮出控件集合，因此如果您在响应另一个即将被轻取消的浮出控件时显示您的 changeCatFlyout，则新的浮出控件将与旧的浮出控件一起被解散。

标签： javascript html microsoft-metro win-universal-app winjs

【解决方案1】：

Flyouts 应该是 document.body 的直接子级。确保飞出没有嵌套在其他 div 中。

【讨论】：

【解决方案2】：

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

基本上我整理的这个小提琴与我的代码相似：https://jsfiddle.net/reko91/yg0rs4xc/13/

注意css：

#wholeContainer {
  position: fixed;
}

因为 wholeContainer 是 position:fixed; 干扰弹出中元素的单击事件的所有内容的容器。我将其更改为absolute，它再次完美运行:)

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

希望对某人有所帮助:)

【讨论】：

【解决方案3】：

见this answer by THETODD。

基本上问题是您需要在父母固定 DIV 之外定义 data-win-control="WinJS.UI.Menu" 部分。似乎您不能定位：FIXED 一个 DIV，然后定位：FIXED 另一个在其中并期望弹出窗口适用于所有浏览器（适用于 IE .. ha）。 WinJS.UI.Menu 也在尝试定位：固定。

所以...

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

【讨论】：