Skip to content
Related Articles

Related Articles

jQuery Mobile Dialog overlayTheme Option

Improve Article
Save Article
  • Last Updated : 26 Jan, 2022
Improve Article
Save Article

jQuery Mobile is a web-based technology designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Dialog is used as a pop-up & can be used on any page to convert it into a modal dialog.

In this tutorial, we are going to learn the jQuery Mobile Dialog overlayTheme Option. The dialog always appears over an overlay layer whose colour scheme can be set with the help of the overlayTheme option.

Syntax: The overlayTheme option takes a single character from a-z where each character represents a color scheme. The option is initialized as follows:

$("#gfgDialog").dialog({
    overlayTheme: "b",
});
  • Get the overlayTheme option

    var overlayThemeOpt = $("#gfgDialog")
        .dialog("option", "overlayTheme");
  • Set the overlayTheme option

    $("#gfgDialog").dialog("option", "overlayTheme", "b");

CDN Links: Use the following CDN links for the jQuery Mobile project.

<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>

Example: In the following example, we have set the overlayTheme option to dark using character “b”.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-role="page" id="gfgpage">
        <div data-role="header">
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
        </div>
        <div data-role="main" class="ui-content">
            <h3>jQuery Mobile Dialog overlayTheme option</h3>
            <center>
                <a href="#gfgDialog" data-rel="dialog">
                    GeeksforGeeks dialog
                </a>
            </center>
        </div>
    </div>
    <div data-role="page" 
         id="gfgDialog"
         data-overlay-theme="b" 
         data-theme="b">
        <div data-role="header">
            <h2>GeeksforGeeks</h2>
        </div>
        <div role="main" class="ui-content">
            <p>Programming Tutorials Website</p>
  
            <ul>
                <li>Data Structures</li>
                <li>Algorithms</li>
                <li>Web Development</li>
            </ul>
        </div>
    </div>
    <script>
    $("#gfgDialog").dialog({
        overlayTheme: "b",
        theme: "b",
    })
    </script>
</body>
  
</html>


Output

jQuery Mobile Dialog overlayTheme Option

jQuery Mobile Dialog overlayTheme Option

Reference: https://api.jquerymobile.com/dialog/#option-overlayTheme


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!