jquery mobile 弹窗（一）

在jquery mobile中，可以设置弹窗，弹窗可以覆盖在页面上展示的。弹窗可以显示一段文本，图片，或其他内容。

1.创建弹窗

运行结果：

点击弹出窗口按钮，会弹出如下图所示的窗口

2.关闭弹窗

默然情况下，点击页面弹窗以外的其他位置或按下esc键，可以关闭弹窗。如果你不想采用这种默认的方法来关闭弹窗，可以在弹窗上添加关闭按钮，按钮上使用data-rel="back"属性，并通过样式来控制按钮的位置。

运行结果：

点击弹出窗口按钮，弹窗的右侧出现一个删除按钮“x”

3.改变弹出位置

默认情况下，弹出会直接显示在点击元素的上方，如果我们想控制弹出的位置，可以在用于打开弹窗的点击链接上使用data-position-to属性。

如果设置弹窗显示在页面中间，只需要设置data-position-to="window"，也可以设置窗口显示在指定元素的位置上，设置data-position-to的值为该元素的id或class即可。

运行结果:

点击在window显示窗口按钮

点击在id=“test”元素上显示按钮