博客

如何使用jQuery Mobile创建一个对话框弹出窗口

  • Post category:jquery

首先，使用jQuery Mobile创建对话框弹出窗口需要引入jQuery核心库和jQuery Mobile库，你可以使用CDN（Content Delivery Network）或下载并引入本地文件。

<!-- 引入jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

其次，创建对话框弹出窗口需要使用jQuery Mobile提供的.dialog()方法，这个方法可以在任何元素上调用，但通常我们使用<div>元素。

<div data-role="dialog" data-close-btn="right" id="dialog">
  <div data-role="header">
    <h1>标题</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>内容</p>
  </div>
  <div data-role="footer">
    <h1>页脚</h1>
  </div>
</div>

在上面的代码中，data-role="dialog"用于标记这个<div>元素是一个对话框，data-close-btn="right"用于设置关闭按钮在对话框右上方。

最后，使用JavaScript代码控制对话框的显示和隐藏。

// 显示对话框
$( "#dialog" ).dialog( "open" );

// 隐藏对话框
$( "#dialog" ).dialog( "close" );

下面是两个示例说明。

示例1：简单对话框弹出窗口

下面的代码演示如何创建一个简单的对话框弹出窗口，点击按钮弹出对话框，点击对话框外部或关闭按钮关闭对话框。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>示例1：简单对话框弹出窗口</title>
    <!-- 引入必要的JS和CSS文件 -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
    <!-- JS代码 -->
    <script>
      $(function() {
        // 等待DOM加载完成后执行下面的代码
        $('#btnShowDialog').click(function() {
          $('#dialog').dialog('open');
        });
      });
    </script>
  </head>
  <body>
    <div data-role="page" id="page">
      <div data-role="header">
        <h1>示例1：简单对话框弹出窗口</h1>
      </div>
      <div data-role="content">
        <p>点击下面的按钮弹出对话框：</p>
        <!-- 按钮 -->
        <button id="btnShowDialog">显示对话框</button>
        <!-- 对话框 -->
        <div data-role="dialog" data-close-btn="right" id="dialog">
          <div data-role="header">
            <h1>标题</h1>
          </div>
          <div data-role="main" class="ui-content">
            <p>内容</p>
          </div>
          <div data-role="footer">
            <h1>页脚</h1>
          </div>
        </div>
      </div>
      <div data-role="footer">
        <h1>页脚</h1>
      </div>
    </div>
  </body>
</html>

示例2：自定义对话框弹出窗口

下面的代码演示如何创建一个自定义的对话框弹出窗口，包含图片和按钮等元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>示例2：自定义对话框弹出窗口</title>
    <!-- 引入必要的JS和CSS文件 -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
    <!-- JS代码 -->
    <script>
      $(function() {
        // 等待DOM加载完成后执行下面的代码
        $('#btnShowDialog').click(function() {
          // 动态修改对话框中的内容
          $('#dialog .ui-content').html('<img src="https://picsum.photos/200/300"/><br/><button data-inline="true" data-rel="back">确定</button>');
          // 显示对话框
          $('#dialog').dialog('open');
        });
      });
    </script>
  </head>
  <body>
    <div data-role="page" id="page">
      <div data-role="header">
        <h1>示例2：自定义对话框弹出窗口</h1>
      </div>
      <div data-role="content">
        <p>点击下面的按钮弹出对话框：</p>
        <!-- 按钮 -->
        <button id="btnShowDialog">显示对话框</button>
        <!-- 对话框 -->
        <div data-role="dialog" data-close-btn="right" id="dialog">
          <div data-role="header">
            <h1>标题</h1>
          </div>
          <div data-role="main" class="ui-content">
            <p>内容</p>
          </div>
          <div data-role="footer">
            <h1>页脚</h1>
          </div>
        </div>
      </div>
      <div data-role="footer">
        <h1>页脚</h1>
      </div>
    </div>
  </body>
</html>
Tags: