¿Cómo generar una ventana emergente simple usando jQuery?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *