如何使用 jQuery Mobile 创建关闭弹出窗口？

jQuery Mobile是一款能够方便地创建移动端网站和应用程序的框架，其中包含了丰富的UI组件和特效功能。其中，弹出窗口（popup）是一种常用的UI组件，可以用于显示一些提示信息、确认对话框、登录框等等。本文将介绍如何使用jQuery Mobile创建和关闭弹出窗口。

创建弹出窗口

在jQuery Mobile中，可以使用<div>元素来创建弹出窗口。在<div>元素中添加data-role="popup"属性，就可以将该元素转换为弹出窗口。如下所示：

<div data-role="popup" id="popupBasic">
  <p>This is a basic popup.</p>
</div>

上面的代码创建了一个基本的弹出窗口，包含一个简单的文本信息。

设置弹出窗口的属性

除了data-role="popup"之外，我们还可以添加一些其他的属性来进一步定制弹出窗口。

• data-dismissible="false"：当用户点击弹出窗口外部时，是否允许关闭弹出窗口。

• data-overlay-theme="a"：弹出窗口旁边的遮罩层的主题颜色。

• data-transition="pop"：弹出窗口显示和关闭的动画效果。

• data-position-to="window"：弹出窗口显示的位置是相对于整个窗口还是相对于特定的元素。

• data-arrow="true"：是否显示箭头指向弹出窗口指示的元素。

<div data-role="popup" id="popupWithOptions" data-dismissible="false" data-overlay-theme="a" data-transition="pop" data-position-to="window" data-arrow="true">
  <p>This popup has some custom options.</p>
</div>

触发弹出窗口的事件

通过添加一个按钮，可以将弹出窗口与某个事件关联起来，当该事件触发时，弹出窗口就会显示出来。

<a href="#popupBasic" data-rel="popup">Show Popup</a>

这里的data-rel="popup"属性告诉jQuery Mobile，当用户点击链接时，显示与该链接关联的弹出窗口。

关闭弹出窗口

在jQuery Mobile中，可以通过两种方法关闭弹出窗口。

方法一：点击弹出窗口外部

当弹出窗口的data-dismissible属性为true时，默认情况下，当用户点击弹出窗口外部时，弹出窗口就会关闭。如果要禁用这个功能，可以将该属性设置为false。

方法二：手动关闭弹出窗口

通过调用popup('close')方法可以手动关闭弹出窗口。比如，当用户点击一个按钮时，就可以关闭弹出窗口。

<a href="#" onclick="$('#popupBasic').popup('close')">Close Popup</a>

完整的弹出窗口示例

<!-- 弹出窗口 -->
<div data-role="popup" id="popupWithOptions" data-dismissible="false" data-overlay-theme="a" data-transition="pop" data-position-to="window" data-arrow="true">
  <p>This popup has some custom options.</p>
  <input type="text" placeholder="Type Something">
  <button onclick="$('#popupWithOptions').popup('close')">Close Popup</button>
</div>

<!-- 触发弹出窗口的按钮 -->
<a href="#popupWithOptions" data-rel="popup">Show Popup</a>

上面的代码创建了一个带有文本框和关闭按钮的弹出窗口。当用户点击“Show Popup”按钮时，弹出窗口就会显示出来。当用户输入一些内容并点击“Close Popup”按钮时，弹出窗口就会关闭。