菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

Query Mobile 弹窗

likuolei

jQuery Mobile 弹窗（Popup）详解

弹窗（Popup） 是 jQuery Mobile 的轻量级模态框，支持 图片、表单、文本、地图 等内容，触控友好，自动居中。

注意：jQM 1.4.5 弹窗基于 CSS 实现，无需 JavaScript 即可使用！

1. 基本结构

<!-- 触发按钮 -->
<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all">打开弹窗</a>

<!-- 弹窗容器 -->
<div data-role="popup" id="myPopup">
  <p>这是一个简单的弹窗！</p>
</div>

必须属性：

  • data-rel="popup"（在触发元素上）
  • data-role="popup"（在弹窗容器上）

2. 弹窗类型

类型写法说明
基础弹窗<div data-role="popup">纯内容
带标题 + 关闭按钮加 <a data-rel="back">推荐
带箭头data-arrow="t,r,b,l"指向触发点
带遮罩默认有（半透明黑）可调透明度
全屏弹窗data-overlay-theme="b" + 样式模拟对话框

3. 推荐模板（带关闭按钮 + 圆角）

<!-- 触发按钮 -->
<a href="#infoPopup" data-rel="popup" data-transition="pop" class="ui-btn ui-mini ui-btn-inline">
  信息
</a>

<!-- 弹窗 -->
<div data-role="popup" id="infoPopup" data-overlay-theme="b" data-theme="a" 
     data-dismissible="true" style="max-width:300px;">

  <!-- 关闭按钮（右上角） -->
  <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">
    关闭
  </a>

  <!-- 内容 -->
  <div class="ui-content">
    <h3>欢迎！</h3>
    <p>当前时间：2025年11月17日 02:49（CET）</p>
    <p>国家：比利时 (BE)</p>
  </div>
</div>

4. 弹窗属性（data-*）

属性值说明
data-rel="popup"—必须，标记触发弹窗
data-transitionpop, fade, slideup 等打开动画
data-position-towindow, #id, origin弹窗定位
data-arrowt, r, b, l箭头方向
data-overlay-themea ~ z遮罩颜色（b 推荐）
data-themea, b弹窗主题
data-dismissible="false"true/false点击遮罩不关闭
data-shadow="false"true/false去掉阴影

5. 完整示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQM 弹窗大全</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-1.11.1.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" data-position="fixed">
    <h1>弹窗演示</h1>
  </div>

  <div data-role="main" class="ui-content">

    <!-- 1. 基础弹窗 -->
    <a href="#popupBasic" data-rel="popup" class="ui-btn ui-btn-inline">基础弹窗</a>
    <div data-role="popup" id="popupBasic">
      <p>你好，世界！</p>
    </div>

    <!-- 2. 带关闭按钮 + 箭头 -->
    <a href="#popupArrow" data-rel="popup" data-position-to="window" 
       data-transition="pop" class="ui-btn ui-btn-inline">带箭头</a>
    <div data-role="popup" id="popupArrow" data-overlay-theme="b" data-arrow="true">
      <a href="#" data-rel="back" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-right">关闭</a>
      <p>箭头自动指向触发按钮！</p>
    </div>

    <!-- 3. 表单弹窗 -->
    <a href="#popupForm" data-rel="popup" data-transition="slideup" class="ui-btn ui-btn-inline">登录</a>
    <div data-role="popup" id="popupForm" data-overlay-theme="a" style="padding:20px; max-width:320px;">
      <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
      <form>
        <label for="user">用户名：</label>
        <input type="text" id="user" placeholder="输入用户名">
        <label for="pass">密码：</label>
        <input type="password" id="pass" placeholder="输入密码">
        <button type="submit" class="ui-btn ui-btn-b">登录</button>
      </form>
    </div>

    <!-- 4. 图片弹窗 -->
    <a href="#popupPhoto" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline">查看图片</a>
    <div data-role="popup" id="popupPhoto" data-overlay-theme="b">
      <a href="#" data-rel="back" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-right">关闭</a>
      <img src="https://picsum.photos/300/200" style="width:100%; display:block;" alt="示例图">
    </div>

    <!-- 5. 全屏弹窗（模拟对话框） -->
    <a href="#popupFull" data-rel="popup" class="ui-btn ui-btn-inline">全屏提示</a>
    <div data-role="popup" id="popupFull" data-overlay-theme="b" 
         style="padding:30px; max-width:100%; height:100%;">
      <h2 style="text-align:center;">系统提示</h2>
      <p style="text-align:center;">是否确认删除？</p>
      <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#" data-rel="back" class="ui-btn ui-btn-b">取消</a></div>
        <div class="ui-block-b"><a href="#" data-rel="back" class="ui-btn ui-btn-a">确认</a></div>
      </div>
    </div>

  </div>

  <div data-role="footer" data-position="fixed">
    <h4>比利时 © 2025</h4>
  </div>
</div>

</body>
</html>

6. JavaScript 控制弹窗

<script>
$(document).on("pagecreate", function() {
  // 打开弹窗
  $("#openBtn").on("tap", function() {
    $("#myPopup").popup("open");
  });

  // 关闭弹窗
  $("#closeBtn").on("tap", function() {
    $("#myPopup").popup("close");
  });

  // 打开时居中
  $("#myPopup").on("popupafteropen", function() {
    console.log("弹窗已打开");
  });
});
</script>

7. 最佳实践

建议说明
始终加关闭按钮<a data-rel="back" class="ui-icon-delete">
设置 max-width防止在平板上过宽
用 data-transition="pop"视觉更自然
表单弹窗加 padding内容不贴边
避免嵌套弹窗不支持

8. 常见问题

问题解决方案
点击遮罩不关闭默认可点，设 data-dismissible="false"
弹窗位置偏移加 data-position-to="window"
箭头不显示加 data-arrow="true" 或 t,r,b,l
iOS 白屏一闪加 data-transition="fade"

9. 弹窗样式速查

<!-- 深色遮罩 + 白色内容 -->
<div data-role="popup" data-overlay-theme="b" data-theme="a">

<!-- 透明遮罩 -->
<div data-role="popup" data-overlay-theme="none">

<!-- 无阴影 -->
<div data-role="popup" data-shadow="false">

总结：推荐弹窗模板

<a href="#myPopup" data-rel="popup" data-transition="pop" class="ui-btn">打开</a>

<div data-role="popup" id="myPopup" data-overlay-theme="b" style="max-width:320px;">
  <a href="#" data-rel="back" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
  <div class="ui-content" style="padding:15px;">
    <h3>标题</h3>
    <p>内容...</p>
  </div>
</div>

需要我为你生成：

  • 可下载的弹窗组件库（ZIP）？
  • 带输入验证的登录弹窗？
  • 图片画廊弹窗（支持滑动）？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部