📌  相关文章
📜  jQuery Mobile 弹出窗口小部件overlayTheme 选项(1)

📅  最后修改于: 2023-12-03 15:02:11.152000             🧑  作者: Mango

jQuery Mobile 弹出窗口小部件 overlayTheme 选项

overlayTheme 是 jQuery Mobile 弹出窗口小部件中的一个选项，用于设置覆盖在页面上的遮罩层的颜色主题。

语法

overlayTheme 的语法如下：

$("[data-role=popup]").popup({
  overlayTheme: "a"
});
参数

可选的颜色主题包括:

  • "a"
  • "b"
  • "c"
  • "d"
  • "e"

overlayTheme 的默认设置为 "a"。

示例

以下示例演示如何使用 overlayTheme 选项来设置遮罩层的颜色主题：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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="page">
      <div data-role="header">
        <h1>Popup Example</h1>
      </div>

      <div data-role="main" class="ui-content">
        <a href="#pop" data-rel="popup" class="ui-btn ui-corner-all ui-shadow">Open Popup</a>
        <div id="pop" data-role="popup" data-position-to="window" data-overlay-theme="b">
          <h1>This is a Popup</h1>
          <p>You can use it to display some content.</p>
        </div>
      </div>

      <div data-role="footer">
        <h4>Footer content goes here</h4>
      </div>
    </div>
  </body>
</html>

上述示例中，当用户点击链接时，会弹出一个覆盖整个屏幕的对话框。该对话框的 overlayTheme 选项被设置为 "b"，因此遮罩层的颜色主题被设置为深蓝色。

Example

通过这个示例，您可以了解如何使用 overlayTheme 选项来设置 jQuery Mobile 弹出窗口小部件的遮罩层的颜色主题。