实例

关闭弹窗

通常情况下，点击弹窗外部区域，或者直接按下 "Esc" 键，弹窗就会自动关闭。要是不希望用户通过点击弹窗外部来关闭弹窗，也可以额外加上 data-dismissible="false" 属性，不过这种做法一般并不推荐。除此之外，还可以在弹窗内部放一个关闭按钮，并给按钮设置 data-rel="back" 属性，再通过样式来调整这个按钮的具体位置。

定位弹窗

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

控制弹窗位置的三种方式：

实例

Window
id="demo"
Origin
	

过渡

默认情况下，弹窗是没有过渡效果的。如果你需要你可以通过 data-transition="value" 属性来添加过渡效果（jQuery Mobile 过渡）：

所有过渡效果实例

Fade
	

弹窗方向小边框

如果需要添加弹窗方向小边框，可以使用 data-arrow 属性，并指定值 "l" (左边), "t" (顶部), "r" (右边) or "b" (底部):

实例

打开弹窗

  
左边框的方向。

	

弹窗对话框

你可以将弹窗制作为一个标准的对话框 (头部, 内容和底部标记):

实例

打开对话框弹窗

  
头部文本..
  
一些文本..
一些链接..
  
底部文本..

	

图片弹窗

实例

弹窗背景覆盖

你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。

默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景：

实例

Show Popup

  
在我身后有个深色背景。

	

一般图片弹窗经常使用背景覆盖：

实例

注意： 在接下来的章节中，你将了解到如何在弹窗中使用表单。