📅 最后修改于: 2023-12-03 15:23:54.236000 🧑 作者: Mango
jQuery Mobile 是一个专为移动端设计的 jQuery 插件，可以使开发者更方便地创建移动应用程序。其中，创建表单弹出窗口是常见的需求，下面为大家介绍如何使用 jQuery Mobile 实现这一功能。
在使用 jQuery Mobile 创建表单弹出窗口之前，需要先引入 jQuery 和 jQuery Mobile 的库文件，并在 HTML 文档中定义一个弹出窗口的外框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单弹出窗口</title>
<!-- 引入 jQuery 和 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/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="popup" id="formPopup" data-dismissible="false" style="max-width: 500px;">
<div data-role="header">
<h2>表单弹出窗口</h2>
</div>
<div data-role="content">
<!-- 这里是表单内容 -->
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
其中，data-role="popup" 表示这是一个弹出窗口，id="formPopup" 为窗口的唯一标识，data-dismissible="false" 表示点击窗口外部或按下 Esc 键时窗口不被关闭，style="max-width: 500px;" 表示窗口的最大宽度为 500 像素。
为了让弹出窗口可以显示表单，我们需要在弹出窗口的 data-role="content" 标签内创建表单代码。这里以一个简单的登录表单为例：
<div data-role="popup" id="formPopup" data-dismissible="false" style="max-width: 500px;">
<div data-role="header">
<h2>表单弹出窗口</h2>
</div>
<div data-role="content">
<!-- 登录表单 -->
<form id="loginForm">
<label for="username">用户名：</label>
<input type="text" name="username" id="username">
<label for="password">密码：</label>
<input type="password" name="password" id="password">
<button type="submit">登录</button>
</form>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
当准备工作完成并创建好表单后，就可以使用 jQuery Mobile 提供的 popup() 方法来显示弹出窗口了。
$(document).on("pagecreate", function() {
$("#formPopup").popup();
});
上面代码中，$(document).on("pagecreate" 表示在页面创建时执行一次，$("#formPopup").popup(); 表示调用 popup() 方法来显示 id 为 formPopup 的弹出窗口。
当表单提交时，我们需要获取表单中用户输入的数据，并进行相应的处理。下面是一个简单的表单提交事件的处理代码：
$(document).on("submit", "#loginForm", function(event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
// 处理用户名和密码
});
上面代码中，$(document).on("submit", "#loginForm" 表示监听 id 为 loginForm 的表单提交事件，event.preventDefault(); 表示阻止表单的默认提交行为，var username = $("#username").val(); 和 var password = $("#password").val(); 分别表示获取表单中用户名和密码输入框中用户的输入值。
最后，让我们来看一下创建表单弹出窗口的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单弹出窗口</title>
<!-- 引入 jQuery 和 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/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="popup" id="formPopup" data-dismissible="false" style="max-width: 500px;">
<div data-role="header">
<h2>表单弹出窗口</h2>
</div>
<div data-role="content">
<!-- 登录表单 -->
<form id="loginForm">
<label for="username">用户名：</label>
<input type="text" name="username" id="username">
<label for="password">密码：</label>
<input type="password" name="password" id="password">
<button type="submit">登录</button>
</form>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<script>
$(document).on("pagecreate", function() {
$("#formPopup").popup();
});
$(document).on("submit", "#loginForm", function(event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
// 处理用户名和密码
});
</script>
</body>
</html>
以上就是使用 jQuery Mobile 创建表单弹出窗口的全部内容。