jQuery Mobile es una biblioteca de JavaScript construida sobre jQuery , se usa para crear sitios web rápidos y receptivos a los que se puede acceder en una variedad de dispositivos como móviles, pestañas y computadoras de escritorio, etc.
En este artículo, utilizaremos el método jQuery Mobile Popup destroy() para destruir una ventana emergente. Cuando invocamos el método destroy() en una ventana emergente, la funcionalidad emergente se elimina del elemento emergente y vuelve a su estado anterior a la inicialización.
Sintaxis:
$( ".selector" ).popup( "destroy" );
Parámetros: Este método no acepta ningún parámetro.
Vínculos CDN: para usar el elemento emergente, primero agregue jQuery Mobile a 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: en el siguiente ejemplo, abriremos una ventana emergente e invocaremos el método destroy() después de 3000 ms.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Popup - reposition method</title>
<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>
function openAndDestroyPopup(){
$( "#popup1" ).popup( "open",
{positionTo: "#target"} );
// Destroy the popup 3 seconds after opening
setTimeout(() => {
$( "#popup1" ).popup( "destroy");
}, 3000);
}
</script>
</head>
<body>
<div data-role="page">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>jQuery Mobile Popup destroy Method</h3>
<p id="target">
Popup will open here and will
destroy after 3 seconds
</p>
<div data-role="popup" id="popup1">
<p>Welcome to GeeksforGeeks</p>
</div>
<button style="width: 450px;"
onclick="openAndDestroyPopup()">
Open & Destroy Popup
</button>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/popup/#method-destroy