Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery Mobile Dialog close() Method

  • Last Updated : 15 Dec, 2021

jQuery Mobile is a web technology used to make responsive websites and apps which are accessible on smartphones, tablets, and desktop devices. In this article, we will use jQuery Mobile Dialog Widget’s close() method to close an opened dialog. When the close() method is invoked on any dialog widget, it simply closes the dialog. This method does not accept any parameters.

Syntax:

$(".selector").dialog("close");

Parameters: This method does not accepts any parameters.

CDN Links: First, add jQuery Mobile scripts needed for your 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-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksForGeeks - Dialog Close</title>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
    </script>
    <script src=
    </script>
  
    <script>
  
        // This method will be called when the 
        // button inside the dialog will be clicked.
        function closeDialog() {
  
            // Invokes close() method on #div2's dialog
            $("#div2").dialog("close");
  
        }
    </script>
</head>
  
<body>
    <div id="div1" data-role="page">
        <div data-role="header">
            <h1>GeeksForGeeks</h1>
            <h4>jQuery Mobile Dialog close() Method</h4>
        </div>
        <div data-role="content">
            <button>
                <a href="#div2">
                    Click to Show the Dialog Box
                </a>
            </button>
        </div>
    </div>
  
    <!-- id ="div2"-->
    <div id="div2" data-role="dialog">
        <div data-role="header">
            <h1>jQuery Mobile - GFG</h1>
        </div>
        <div data-role="content">
            jQuery Mobile - Dialog close() method example.
            <button onclick="closeDialog();">
                This Button Closes the Dialog
            </button>
        </div>
    </div>
</body>
  
</html>

Output:

Dialog Close() Method

Reference: https://api.jquerymobile.com/dialog/#method-close


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!