jQuery Mobile Dialog close()方法
jQuery Mobile是一种网络技术,用于制作响应式网站和应用程序,可以在智能手机、平板电脑和桌面设备上访问。在这篇文章中,我们将使用jQuery Mobile Dialog Widget的close()方法来关闭一个打开的对话框。当close()方法在任何对话框部件上被调用时,它只是关闭了对话框。这个方法不接受任何参数。
语法:
$(".selector").dialog("close");
参数:该方法不接受任何参数。
CDN链接:首先,添加你的项目需要的jQuery Mobile脚本。
<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>
示例:
<!DOCTYPE html>
<html>
<head>
<title>GeeksForGeeks - Dialog Close</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<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>
<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>
输出: