jQuery Mobile 对话框 close() 方法(1)

📌 相关文章

📜 jQuery Mobile 对话框 close() 方法(1)

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

jQuery Mobile 对话框 close() 方法

概述

jQuery Mobile 对话框是一个弹出框，可以在其中显示一些信息或者进行一些操作。close() 方法用于关闭对话框。本篇文章将详细介绍 close() 方法的用法。

语法

$( ".ui-dialog" ).dialog( "close" );

其中，".ui-dialog" 表示对话框的选择器。

参数

close() 方法无需传入任何参数。

示例

下面是一个简单的示例，演示了如何使用 close() 方法关闭对话框：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Mobile Dialog Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
    $(document).on("pagecreate", function() {
      $( "#dialog" ).enhanceWithin().popup();
    });
  </script>
</head>
<body>
 
  <div data-role="page">
 
    <div data-role="header">
      <h1>jQuery Mobile Dialog Example</h1>
    </div><!-- /header -->
 
    <div role="main" class="ui-content">
      <a href="#dialog" data-rel="popup" class="ui-btn ui-corner-all ui-shadow">Open Dialog</a>
      <div data-role="popup" id="dialog" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="a" class="ui-corner-top">
          <h1>Dialog</h1>
        </div>
        <div role="main" class="ui-content">
          <h3 class="ui-title">Are you sure you want to delete the item?</h3>
          <p>This action cannot be undone.</p>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onClick="$('#dialog').dialog('close');">Delete</a>
        </div>
      </div><!-- /popup -->
    </div><!-- /content -->
 
    <div data-role="footer">
      <h4>jQuery Mobile Dialog Example</h4>
    </div><!-- /footer -->
 
  </div><!-- /page -->
 
</body>
</html>

在这个示例中，我们创建了一个对话框，用户点击 "Delete" 按钮时，会调用 close() 方法关闭对话框。

结论

以上就是 close() 方法的详细介绍，close() 方法可以很方便地关闭对话框，是 jQuery Mobile 提供的一个非常实用的功能。