jQuery Mobile es una tecnología web que se utiliza para crear aplicaciones y sitios web receptivos a los que se puede acceder desde teléfonos inteligentes, tabletas y dispositivos de escritorio. En este artículo, utilizaremos el método close() de jQuery Mobile Dialog Widget para cerrar un cuadro de diálogo abierto. Cuando se invoca el método close() en cualquier widget de diálogo, simplemente cierra el diálogo. Este método no acepta ningún parámetro.
Sintaxis:
$(".selector").dialog("close");
Parámetros: Este método no acepta ningún parámetro.
Vínculos CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<enlace rel=”hoja de estilo” 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>
Ejemplo:
HTML
<!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>
Producción:
Referencia: https://api.jquerymobile.com/dialog/#method-close