使用 jQuery Mobile 创建填充弹出窗口

在移动端开发中，弹出窗口是一个常见的 UI 元素。jQuery Mobile 提供了内置的弹出窗口组件，可以很容易地创建弹出窗口。本文将介绍如何使用 jQuery Mobile 创建填充弹出窗口。

步骤

1. 在 HTML 文件中引入 jQuery、jQuery Mobile 和自定义的 JavaScript 文件。

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQuery Mobile -->
<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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<!-- 引入自定义的 JavaScript 文件 -->
<script src="yourFile.js"></script>

2. 在 HTML 文件中创建一个链接，用于触发弹出窗口。

<!-- 触发链接 -->
<a href="#popupDialog" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">点击我</a>

3. 在 HTML 文件中创建弹出窗口的内容。

<!-- 弹出窗口 -->
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false" style="max-width:400px;">
  <div data-role="header" data-theme="a">
    <h1>弹出窗口标题</h1>
  </div>
  <div role="main" class="ui-content">
    <p>弹出窗口内容</p>
  </div>
  <div data-role="footer" data-theme="a">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">关闭</a>
  </div>
</div>

4. 在自定义的 JavaScript 文件中添加以下代码，用于设置弹出窗口的位置和宽高。

$(document).on("pagecreate", function() {
  $("#popupDialog").enhanceWithin().popup();
  $("#popupDialog").popup("option", {
    positionTo: "window",
    transition: "pop",
    width: "auto",
    height: "auto",
    x: 0,
    y: 0
  });
});

Markdown 代码片段

HTML 代码

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQuery Mobile -->
<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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<!-- 引入自定义的 JavaScript 文件 -->
<script src="yourFile.js"></script>

<!-- 触发链接 -->
<a href="#popupDialog" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">点击我</a>

<!-- 弹出窗口 -->
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false" style="max-width:400px;">
  <div data-role="header" data-theme="a">
    <h1>弹出窗口标题</h1>
  </div>
  <div role="main" class="ui-content">
    <p>弹出窗口内容</p>
  </div>
  <div data-role="footer" data-theme="a">
    <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">关闭</a>
  </div>
</div>

JavaScript 代码

$(document).on("pagecreate", function() {
  $("#popupDialog").enhanceWithin().popup();
  $("#popupDialog").popup("option", {
    positionTo: "window",
    transition: "pop",
    width: "auto",
    height: "auto",
    x: 0,
    y: 0
  });
});