La tarea es generar una ventana emergente usando jQuery. Las ventanas emergentes son útiles para mostrar información importante a los visitantes de un sitio web.
Enfoque: Se puede hacer un pop simple usando el método toggle() de jQuery que alterna entre las funciones hide() y show() de jQuery, es decir, verifica la visibilidad del selector utilizado. El método hide() se ejecuta cuando el selector está visible y show() se ejecuta cuando el selector no está visible.
Muestra la ventana emergente si se hace clic en el botón Mostrar ventana emergente y oculta la ventana emergente si se hace clic en el botón cerrado.
El selector utilizado para alternar es «.content» que contiene el botón de cerrar y el cuerpo de la ventana emergente. Inicialmente, para ocultar la recarga de la página emergente, hemos utilizado la propiedad display: none en la clase .content en la etiqueta de estilo.
Ahora, cuando el usuario hace clic en el botón Mostrar ventana emergente, el evento onclick llama a togglePopup() , que muestra la ventana emergente, y cuando el usuario hace clic en el botón Cerrar, el evento onclick vuelve a llamar a togglePopup(), que oculta la ventana emergente.
Sintaxis:
$(selector).toggle();
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery cdn link -->
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<style type="text/css">
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 200px;
text-align: center;
background-color: #e8eae6;
box-sizing: border-box;
padding: 10px;
z-index: 100;
display: none;
/*to hide popup initially*/
}
.close-btn {
position: absolute;
right: 20px;
top: 15px;
background-color: black;
color: white;
border-radius: 50%;
padding: 4px;
}
</style>
</head>
<body>
<button onclick="togglePopup()">show popup</button>
<!-- div containing the popup -->
<div class="content">
<div onclick="togglePopup()" class="close-btn">
×
</div>
<h3>Popup</h3>
<p>
jQuery is an open source JavaScript library
that simplifies the interactions between an
HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript.
Elaborating the terms, jQuery simplifies
HTML document traversing and manipulation,
browser event handling, DOM animations,
Ajax interactions, and cross-browser
JavaScript development.
</p>
</div>
<script type="text/javascript">
// Function to show and hide the popup
function togglePopup() {
$(".content").toggle();
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por darksiderrohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA