在 jQuery Mobile 中，弹窗（Dialog）是一种常见的用户界面元素，用于显示额外的信息、收集用户输入或进行其他交互。以下是创建和使用 jQuery Mobile 弹窗的基本示例：

基本弹窗：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile Dialog</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-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Home Page -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home Page</h1>
    </div>

    <div data-role="content">
        <a href="#myDialog" data-rel="dialog" data-role="button">Open Dialog</a>
    </div>

    <div data-role="footer">
        <h4>&copy; 2023 My App</h4>
    </div>
</div>

<!-- Dialog -->
<div data-role="page" id="myDialog">
    <div data-role="header">
        <h1>Dialog Title</h1>
    </div>

    <div data-role="content">
        <p>This is a simple dialog.</p>
        <a href="#" data-role="button" data-rel="back">Close</a>
    </div>
</div>

</body>
</html>

在这个例子中，我们创建了一个按钮（data-role="button"）来触发弹窗。当按钮被点击时，它会打开一个具有 ID 为 "myDialog" 的页面作为弹窗。弹窗页面中包含了弹窗的标题、内容和关闭按钮。

自定义弹窗样式：
<a href="#customDialog" data-rel="dialog" data-role="button">Open Custom Dialog</a>

<div data-role="page" id="customDialog">
    <div data-role="header" data-theme="b">
        <h1>Custom Dialog</h1>
    </div>

    <div data-role="content" data-theme="b">
        <p>This is a custom-styled dialog.</p>
        <a href="#" data-role="button" data-rel="back" data-theme="b">Close</a>
    </div>
</div>

在这个例子中，我们使用了自定义的主题（data-theme="b"）来定制弹窗的样式。你可以根据需要自定义弹窗的标题、内容、按钮等元素的样式。

请注意，在弹窗的页面中，我们使用了 data-rel="back" 属性的按钮来关闭弹窗。这是 jQuery Mobile 中用于关闭当前页面的一种常见方式。

以上示例只是 jQuery Mobile 弹窗的基本用法，你可以根据需要扩展弹窗的内容和样式，以满足应用的需求。弹窗提供了一个便捷的方式来显示额外的信息或进行用户交互，增强了移动应用的用户体验。


转载请注明出处：http://www.zyzy.cn/article/detail/14449/jQuery Mobile