我个人对内联数据收集弹出窗口不太满意。我决定用我自己的网格结构布局和设计来构建我自己的模态控件。
需要注意的一件事是,如果您使用自定义路线,您将需要使用 data-win-options 来设置模态框的位置,否则您将使用弹出式键盘获得一些奇怪的键盘行为。
作为一名 UX 设计师,通过交易,我会仔细评估每个控件并确定在每个场景中最有效的方法。就像杰里米上面说的(喜欢这个节目)。我首先确定我打算收集多少信息,然后在另一个屏幕上收集这些信息会打断我的流程。因此,可以从按钮上解除或在模态外部录音的“锁定”模态似乎是最好的方法。
<style>
.customModal
width:500px
height:375px;
display: -ms-grid;
-ms-grid-columns: 100px 1fr 100px;
-ms-grid-rows: 100px 1fr 100px;
}
.CustomModalGridTitle {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}
.CustomModalGridContent {
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}
etc.....
</style>
<div class="customModal" id="customModal" data-win-control="WinJS.UI.Flyout" data-win-options="{ placement : bottom;}" >
<div class=customModalGrid>
<div class="CustomModalGridTitle"></div>
<div class="CustomModalGridContent"></div>
<div class="CustomModalGridButtons"></div>
</div>
</div>
然后我会使用 MS 上的网格布局工具来帮助您构建显示网格并使其更具可重用性:http: //ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm
这就是我采取的方法:)。你当然需要在你的 js 中设置你的事件监听器来触发 customModal。在你准备好的 yourpage.js 中的某个地方
// Show the flyout
function showFormatTextFlyout() {
var myCustomModal = document.getElementById("formatTextButton");
document.getElementById("#customModal").winControl.show(myCustomModal);
}
// 你可能想要
如果您有一个外部 div,您可以将其设置为 100% 宽度,并基本上模仿 Dialog 控件进行用户身份验证。