jQuery Mobile 弹窗学习笔记

弹窗简介

jQuery Mobile 中的弹窗是一种受欢迎的用户界面元素，它可以在页面上弹出一个对话框，以便向用户提供额外的信息或收集他们的响应。

弹窗的种类

在 jQuery Mobile 中有两种类型的弹窗: 对话框和警告框。

对话框

对话框是一个显示自定义内容的浮动窗口。它通常用于显示更复杂的表单或用户输入。

以下是一个简单的对话框示例：

Copy Code
<div data-role="dialog" id="myDialog">
  <div data-role="header">
    <h1>My Dialog</h1>
  </div>
  <div data-role="content">
    <p>This is my dialog content.</p>
  </div>
</div>

我们可以通过以下方式来弹出对话框：

Copy Code
<a href="#myDialog" data-rel="dialog">Open dialog</a>

警告框

警告框用于显示重要的消息或需要用户注意的情况，通常只包含一些文本和一个“确定”按钮。

以下是一个简单的警告框示例：

Copy Code
<div data-role="popup" id="myPopup">
  <p>This is my popup.</p>
</div>

我们可以使用以下代码来弹出警告框：

Copy Code
<a href="#myPopup" data-rel="popup">Open popup</a>

弹窗的选项

弹窗有许多选项可以使用，从而更好地适应您的应用程序需求。下面是一些可用选项的示例：

Copy Code
<div data-role="dialog" id="myDialog" data-overlay-theme="b" data-theme="a" data-dismissible="false">
  <div data-role="header" data-theme="a">
    <h1>My Dialog</h1>
  </div>
  <div data-role="content" data-theme="a">
    <p>This is my dialog content.</p>
  </div>
</div>

在这个例子中，我们使用了以下选项：

data-overlay-theme 定义覆盖层的主题
data-theme 定义弹窗的主题
data-dismissible 禁用对话框外部的单击以关闭对话框

实例

以下是一个完整的示例，演示如何创建一个基本的对话框和警告框：

Copy Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>

<div data-role="page">
  
  <div data-role="header">
    <h1>jQuery Mobile Popup Example</h1>
  </div>

  <div data-role="main" class="ui-content">
  
    <h2>Dialog Example</h2>
    <a href="#myDialog" data-rel="dialog">Open Dialog</a>

    <div data-role="dialog" id="myDialog">
      <div data-role="header">
        <h1>My Dialog</h1>
      </div>
      <div data-role="content">
        <p>This is my dialog content.</p>
      </div>
    </div>
    
    <h2>Popup Example</h2>
    <a href="#myPopup" data-rel="popup">Open Popup</a>

    <div data-role="popup" id="myPopup">
      <p>This is my popup.</p>
    </div>
    
  </div>

  <div data-role="footer">
    <h3>Footer Text</h3>
  </div>
  
</div> 

</body>
</html>

这个示例将生成一个具有两个按钮的页面，一个用于打开对话框，另一个用于打开警告框。