如何使用jQuery Mobile创建一个填充式弹出窗口

如何使用jQuery Mobile创建一个填充式弹出窗口？本文将为大家提供一份详细攻略。

1. 创建一个填充式弹出窗口

<!-- 弹出窗口内容代码 -->
<div id="popup1" data-role="popup" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
  <h3>Example</h3>
  <p>This is a simple popup that has been automatically sized to fit its contents.</p>
</div>

其中，data-role="popup" 表示这是一个弹出窗口，data-theme="a" 表示使用主题 a，data-overlay-theme="b" 表示覆盖层使用主题 b。弹出窗口的内容写在 div 标签中。style 属性用于指定弹出窗口的宽度和底部内边距。

2. 创建一个触发弹出窗口的按钮

<!-- 触发弹出窗口的按钮代码 -->
<a href="#popup1" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="slideup">Open Popup</a>

其中，href="#popup1" 表示点击按钮后会弹出 id 为 popup1 的弹出窗口；data-rel="popup" 表示这是一个弹出窗口链接；class 属性用于指定按钮样式，这里使用了 jQuery Mobile 默认提供的样式；data-transition="slideup" 表示弹出窗口显示时使用 slideup 动画效果。

3. 初始化弹出窗口

// 弹出窗口初始化代码
$(document).on("mobileinit", function () {
  $.mobile.popup.prototype.options.history = false;
});

在文档加载时调用 mobileinit 事件初始化弹出窗口，其中的 history 属性设为 false 表示点击返回按钮时不会关闭弹出窗口。

示例说明

示例 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>填充式弹出窗口示例 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script>
      $(document).on("mobileinit", function () {
        $.mobile.popup.prototype.options.history = false;
      });
    </script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>填充式弹出窗口示例 1</h1>
      </div>
      <div role="main" class="ui-content">
        <a href="#popup1" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="slideup">打开弹出窗口</a>
        <div id="popup1" data-role="popup" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
          <h3>填充式弹出窗口示例 1</h3>
          <p>这是一个填充式弹出窗口示例。</p>
        </div>
      </div>
      <div data-role="footer">
        <h4>版权信息</h4>
      </div>
    </div>
  </body>
</html>

在此示例中，我们创建了一个简单的页面，其中包含一个按钮和一个弹出窗口。点击按钮后，弹出窗口会被自适应地展示在页面上方。

示例 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>填充式弹出窗口示例 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
    <script>
      $(document).on("mobileinit", function () {
        $.mobile.popup.prototype.options.history = false;
      });
    </script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>填充式弹出窗口示例 2</h1>
      </div>
      <div role="main" class="ui-content">
        <p>这是一个填充式弹出窗口示例，通过设置样式可以实现更丰富的效果。</p>
        <a href="#popup1" data-rel="popup" class="ui-btn ui-icon-shop ui-btn-icon-left ui-corner-all ui-shadow ui-btn-inline" data-transition="slideup">购买商品</a>
        <div id="popup1" data-role="popup" data-theme="a" data-overlay-theme="b" class="ui-content ui-corner-bottom" style="max-width:340px; padding:10px;">
          <img src="https://cdn.bootcss.com/jquery-mobile/1.4.5/images/logojqm.png" style="float:left;width:40px;height:40px;margin:0 10px 10px 0;">
          <h3>填充式弹出窗口示例 2</h3>
          <p>这是一个填充式弹出窗口示例，通过设置样式可以实现更丰富的效果。</p>
        </div>
      </div>
      <div data-role="footer">
        <h4>版权信息</h4>
      </div>
    </div>
  </body>
</html>

在此示例中，我们创建了一个购物页面，包含了一个购买按钮和一个弹出窗口。点击按钮后，弹出窗口内显示了商品信息。通过设置 ui-corner-bottom 样式，使得弹出窗口底部呈现圆角效果。此外，我们还添加了一个 ui-icon-shop 样式，以便图标支持。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建一个填充式弹出窗口 - Python技术站