Open In App

jQuery Mobile Dialog close() Method

Last Updated : 15 Dec, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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



Previous Article
Next Article

Similar Reads

How to remove close button from jQuery UI dialog using jQuery ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is a temporary window. An application creates a dial
2 min read
jQuery UI dialog close() Method
close() method is used to disable the dialog. This method does not accept any argument Syntax: $( ".selector" ).dialog("close"); Approach: First, add jQuery UI scripts needed for your project. &lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"&gt; &lt;script src = "https://code.jquery.com/jquery
1 min read
jQuery UI Dialog close Event
jQuery UI Close event is triggered when the dialog box is closed. Learn more about jQuery selectors and events here. Syntax: $(".selector").dialog ( close: function( event, ui ) { console.log('closed') },Approach: First, add jQuery Mobile scripts needed for your project.&lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-u
1 min read
How to remove close button from jQuery UI dialog using CSS ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using CSS. This can be achieved by setting the display property of the ui-dialog-titlebar-close class element to none. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog b
3 min read
How to call Hook into dialog close event in jQuery UI ?
In this article, we are going to learn how we can call Hook into a "dialog" close event in jQuery UI. To call a hook into the dialog "close" event in jQuery UI, we will use the close event provided by the dialog widget. This event is fired when the dialog is closed. Let's understand what a hook is, a hook is a function that is executed at a specifi
3 min read
HTML DOM Dialog close() Method
The DOM Dialog close() method is used to close the dialog. The Dialog element is accessed by getElementById(). It is used in HTML5. While using this method, the user can interact with other elements on the page. It is used with the Dialog show() method. Syntax: dialogObject.close() Example: This example shows the working of Dialog close() Method: C
1 min read
jQuery Mobile Popup close() Method
jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for creating responsive websites and web apps. It is built on top of jQuery. In this article, we will use jQuery Mobile Popup close() method to close an already opened popup. This method doesn't accept any parameter. Syntax: $( ".selector" ).popup( "close" ); CDN Link
2 min read
jQuery Mobile panel close() Method
jQuery Mobile is a framework for creating websites and web apps that are accessible on devices of various screen sizes like mobiles, tablets, laptops, and desktops. In this article, we will use the jQuery Mobile panel close() method to close an already opened panel. The panel close() method does not accept any arguments. Syntax: $(".selector").pane
2 min read
jQuery Mobile Selectmenu close() Method
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Selectmenu close() method. Using this method, we can close the opened select custom menu. Syntax: $( ".selector" ).selectmenu( "close" ); Parameter: This method d
2 min read
Onsen UI Dialog CSS Component Material Alert Dialog
Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and
4 min read