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>
<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:
Reference: https://api.jquerymobile.com/dialog/#method-close
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 Dec, 2021
Like Article
Save Article