Open In App

jQuery Mobile Page closeBtn Option

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery Mobile is a web-based technology designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. PageWidget in jQuery Mobile is responsible for maintaining a single item in jQuery Mobile’s framework.

In this article, we are going to learn the jQuery Mobile Page closeBtn option. The closeBtn option is facilitated by the dialog extension, which provides the closing button of the dialog page to return to the main page. There can be 3 different values:

  • left: The button appears on the left edge of the titlebar.
  • right: The button appears on the right edge of the titlebar.
  • none: The close button will not appear on the dialog box

Syntax: The closeBtn option takes a string value and passes one of the above 3 position values, as a parameter. The default value is left.

Initialize the closeBtn option:

$("#gfgDialog").page({ closeBtn: "right" });
  • Get the closeBtn option after initialization

    var closeBtnOpt = $("#gfgDialog").page("option", "closeBtn");
  • Set the closeBtn option after initialization

    $("#gfgDialog").page("option", "closeBtn", "right");

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 below example, we have provided the closeBtn option with the right position. Hence, the close button appears on the right of the titlebar.

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 Page closeBtn Option
            </h3>
            <center>
                <a href="#gfgDialog" 
                   data-rel="dialog">
                    GeeksforGeeks dialog
                </a
            </center>
        </div>
    </div>
    <div data-role="page" id="gfgDialog">
        <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>
        $(document).ready(function() {
            $("#gfgDialog").page({
                dialog: true,
                closeBtn: "right"
            });
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Page closeBtn Option

jQuery Mobile Page closeBtn Option

Reference: https://api.jquerymobile.com/page/#option-closeBtn



Last Updated : 20 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads