📌  相关文章
📜  jQuery Mobile 弹出 close() 方法(1)

📅  最后修改于: 2023-12-03 15:02:11.143000             🧑  作者: Mango

jQuery Mobile 弹出 close() 方法

在 jQuery Mobile 中，我们可以使用 close() 方法来关闭一个已经弹出的对话框或菜单。这个方法可以用于处理用户在对话框或菜单之外的区域点击时，关闭当前的对话框或菜单的情况。

使用方法
关闭对话框

对于弹出的对话框，我们可以使用以下代码来关闭：

$('#myDialog').dialog('close');

其中，#myDialog 是对话框的 ID，这个方法会使得对话框消失。

关闭菜单

对于弹出的菜单，我们同样可以使用 close() 方法来关闭：

$('#myMenu').popup('close');

其中，#myMenu 是菜单的 ID，这个方法会使得菜单消失。

示例

假设我们有下面这个简单的对话框：

<div data-role="dialog" id="myDialog">
  <div data-role="header">
    <h1>我是对话框的标题</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>我是对话框的内容。</p>
  </div>
</div>

我们可以使用下面的代码来触发对话框的弹出：

$('#myDialog').dialog('open');

然后，在对话框外的区域点击，我们可以关闭对话框：

$('#myDialog').dialog('close');

同样的，如果我们有一个弹出菜单：

<ul data-role="listview" data-inset="true">
  <li>
    <a href="#" id="myMenuButton" data-rel="popup">我的菜单</a>
    <div data-role="popup" id="myMenu">
      <ul data-role="listview">
        <li><a href="#">选项1</a></li>
        <li><a href="#">选项2</a></li>
        <li><a href="#">选项3</a></li>
      </ul>
    </div>
  </li>
</ul>

我们可以使用下面的代码来触发菜单的弹出：

$('#myMenuButton').click(function() {
  $('#myMenu').popup('open');
});

然后，在菜单外的区域点击，我们可以关闭菜单：

$('#myMenu').popup('close');
参考文献