Cómo generar una ventana emergente simple usando jQuery

217

Estoy diseñando una página web. Cuando hacemos clic en el contenido del correo con nombre div, ¿cómo puedo mostrar una ventana emergente que contiene una etiqueta de correo electrónico y un cuadro de texto?

Rajasekar
fuente
1
Encontré esta respuesta muy útil para alertas rápidas sin tocar el HTML o CSS existente. Crea y muestra un div simplemente usando jQuery de js.
mabi

Respuestas:

241

Primero el CSS: modifica esto como quieras:

a.selected {
  background-color:#1F75CC;
  color:white;
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

Y el JavaScript:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

Y finalmente el html:

<div class="messagepop pop">
  <form method="post" id="new_message" action="/messages">
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
  </form>
</div>

<a href="/contact" id="contact">Contact Us</a>

Aquí hay una demostración e implementación de jsfiddle.

Dependiendo de la situación, es posible que desee cargar el contenido emergente a través de una llamada ajax. Es mejor evitar esto si es posible, ya que puede dar al usuario un retraso más significativo antes de ver el contenido. Aquí hay un par de cambios que querrás hacer si adoptas este enfoque.

HTML se convierte en:

<div>
    <div class="messagepop pop"></div> 
    <a href="/contact" id="contact">Contact Us</a>
</div>

Y la idea general del JavaScript se convierte en:

$("#contact").on('click', function() {
    if($(this).hasClass("selected")) {
        deselect();               
    } else {
        $(this).addClass("selected");
        $.get(this.href, function(data) {
            $(".pop").html(data).slideFadeToggle(function() { 
                $("input[type=text]:first").focus();
            });
        }
    }
    return false;
});
Andy Gaskell
fuente
Está funcionando, gracias. Pero voy a incluir otro botón de registro de llamadas. cuando se hace clic, debe aparecer el formulario de registro. Para eso incluí la misma función y cambié el nombre de identificadores y clases. El problema es que cuando hago clic en el botón Cerrar del formulario de registro, alterna el formulario de contacto. Necesito ayuda @jason Davis
Rajasekar
1
para eliminar el html que agrega al cerrar, cambie el método de cierre a $ (". close"). live ('click', function () {$ (". pop"). slideFadeToggle (); $ ("# contact") .removeClass ("selected"); $ (". pop"). remove (); // agrega esto ... return false;}); esto corregirá el problema que obtienes cuando haces clic en el enlace más de una vez antes de cerrar la ventana emergente. buena respuesta por cierto, ingenioso y simple ...
Jonx
10
@yahelc Intente hacer clic en "Registrarse" más de una vez consecutivamente, luego haga clic en "Cancelar". Uh-oooohhhh
AVProgrammer
No estoy de acuerdo con la parte del "gran código". Una gran cantidad de contenido está codificado en JavaScript. Sí, todos tenemos javascript en nuestros navegadores en estos días, pero simplemente no es la forma correcta de hacer web. HTML es para contenido, js para "maquillaje". La respuesta de Karim79 es mejor desde mi perspectiva. Incluya su marcado en el HTML donde pertenece, escóndelo y simplemente muéstrelo y tráigalo como emergente. Una solución mucho más limpia que imprimir mucho HTML directamente desde javascript. Usted no tiene que utilizar el jQueryUI si no lo necesita, hay un millón de maneras de poner algún contenido en una ventana emergente
ZolaKt
12
Según el sitio web jQuery , a partir de jQuery 1.7, el método .live () está en desuso. Use .on () para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en lugar de .live (). . Así que reemplacé .live con .on . Haga clic aquí para ver una versión más genérica del código de Andy . Además, utilicé el enlace CDN para una versión más reciente de jQuery en la página real<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
vulcan raven el
98

Echa un vistazo a jQuery UI Dialog . Lo usarías así:

El jQuery:

$(document).ready(function() {
    $("#dialog").dialog();
});

El marcado:

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

¡Hecho!

Tenga en cuenta que se trata del caso de uso más simple que existe, sugeriría leer la documentación para tener una mejor idea de lo que se puede hacer con ella.

karim79
fuente
Aparte de Jquery, ¿tengo que incluir algún complemento? @Karim
Rajasekar
8
@Rajasekar: deberá descargar el paquete jQuery UI y, como mínimo, incluir ui.core.js y ui.dialog.js para obtener un Diálogo. Si desea que el diálogo se pueda arrastrar y / o cambiar de tamaño, deberá incluir ui.draggable.js y ui.resizable.js.
karim79
66
Hmm Sería una mejor respuesta con un jsfiddle.
Bryce
23

Yo uso un complemento jQuery llamado ColorBox , es

  1. Muy fácil de usar
  2. ligero
  3. personalizable
  4. el mejor diálogo emergente que he visto para jQuery todavía
JasonDavis
fuente
4

Creo que este es un gran tutorial sobre cómo escribir una simple ventana emergente de jquery. Además se ve muy hermoso

andy boot
fuente
3

Complemento emergente modal extremadamente ligero. POPELT - http://welbour.com/labs/popelt/

Es liviano, admite ventanas emergentes anidadas, orientado a objetos, admite botones dinámicos, receptivos y mucho más. La próxima actualización incluirá envíos de formularios Popup Ajax, etc.

Siéntase libre de usar y twittear comentarios.

Elton Jain
fuente
2

Ventana emergente simple usando html5 y javascript.

html: -

    <dialog id="window">  
     <h3>Sample Dialog!</h3>  
     <p>Lorem ipsum dolor sit amet</p>  
     <button id="exit">Close Dialog</button>
    </dialog>  

  <button id="show">Show Dialog</button> 

JavaScript: -

   (function() {  

            var dialog = document.getElementById('window');  
            document.getElementById('show').onclick = function() {  
                dialog.show();  
            };  
            document.getElementById('exit').onclick = function() {  
                dialog.close();  
            };
        })();
Arshid KV
fuente
Me sale un TypeError: dialog.show is not a functionerror ¿Podría por favor incluir un JSFiddle?
Magiranu
0

Aquí hay una ventana emergente muy simple:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #modal {
                position:absolute;
                background:gray;
                padding:8px;
            }

            #content {
                background:white;
                padding:20px;
            }

            #close {
                position:absolute;
                background:url(close.png);
                width:24px;
                height:27px;
                top:-7px;
                right:-7px;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var modal = (function(){
                // Generate the HTML and add it to the document
                $modal = $('<div id="modal"></div>');
                $content = $('<div id="content"></div>');
                $close = $('<a id="close" href="#"></a>');

                $modal.hide();
                $modal.append($content, $close);

                $(document).ready(function(){
                    $('body').append($modal);                       
                });

                $close.click(function(e){
                    e.preventDefault();
                    $modal.hide();
                    $content.empty();
                });
                // Open the modal
                return function (content) {
                    $content.html(content);
                    // Center the modal in the viewport
                    $modal.css({
                        top: ($(window).height() - $modal.outerHeight()) / 2, 
                        left: ($(window).width() - $modal.outerWidth()) / 2
                    });
                    $modal.show();
                };
            }());

            // Wait until the DOM has loaded before querying the document
            $(document).ready(function(){
                $('a#popup').click(function(e){
                    modal("<p>This is popup's content.</p>");
                    e.preventDefault();
                });
            });
        </script>
    </head>
    <body>
        <a id='popup' href='#'>Simple popup</a>
    </body>
</html>

Se puede encontrar una solución más flexible en este tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Aquí está close.png para la muestra.

John29
fuente
0

SOLO LÓGICA POPUP CSS! PRUEBA HAZLO. ¡FÁCIL! Creo que esto puede ser popular en el futuro

            <a href="#openModal">OPEN</a>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close"  class="close">X</a>
                    <h2>MODAL</h2>

                </div>
            </div>


.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
}

.modalDialog:target {
    display: block;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
zloctb
fuente
¡No se cierra!
vy32