模态框表单

创建一个函数 showPrompt(html, callback)，该函数显示一个表单，里面有消息 html，一个 input 字段和 OK/CANCEL 按钮。

用户应该在文本字段中输入一些内容，然后按下 Enter 键或点击 OK 按钮，然后 callback(value) 就会被调用，参数为输入的值。
否则，如果用户按下 Esc 键或点击 CANCEL 按钮，那么 callback(null) 就会被调用。

在这两种情况下，输入过程都会结束，并移除表单。

要求：

表单应该在窗口的正中心。
表单是 模态框（modal）。换句话说，在用户关闭模态框之前，用户无法与页面的其它部分进行任何交互。
当表单显示后，焦点应该在用户需要进行输入的 <input> 输入框中。
按键 Tab/Shift+Tab 应该能在表单字段之间切换焦点，不允许焦点离开表单字段到页面的其它元素上。

使用示例：

          showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});
        

使用 iframe 嵌入的一个示例：

P.S. 源文档有给表单设定了固定位置的 HTML/CSS，但是做成模态框的方式取决于你。

打开一个任务沙箱。

可以使用一个覆盖整个窗口的半透明 <div id="cover-div"> 来实现模态框窗口，如下所示：

          #cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}
        

由于 <div> 遮盖了所有的元素，所以它会获取到所有的点击，而它下面的元素就无法获取这些点击了。

我们也可以设置 body.style.overflowY='hidden' 来阻止页面的滚动。

表单元素不应该在 <div> 中，而应在它下边，因为我们不想让表单具有 opacity 属性。

使用沙箱打开解决方案。