Cómo generar una ventana emergente simple usando jQuery

238

Algo este sencillo no necesita un plugin. Esto puede parecer mucho código, pero es bastante simple.

primer lugar, el CSS - ajustar esto, sin embargo te gusta:

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>

Here is a jsfiddle demo and implementation.

Dependiendo de la situación, es posible que desee cargar el contenido emergente mediante una llamada ajax. Lo mejor es evitar esto si es posible, ya que puede dar al usuario un retraso más significativo antes de ver el contenido. Aquí hay algunos cambios que querrás hacer si tomas 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; 
});

Fuente

2009-08-25 17:03:51

+0

Su funcionamiento, gracias. Pero voy a incluir otro botón de registro de llamadas. cuando se hace clic en él, debe aparecer el formulario de registro. Para eso incluí la misma función y cambié el nombre de los identificadores y las clases. El problema es cuando hago clic en el botón Cerrar del formulario de registro, alterna el formulario de contacto. ¿Necesita ayuda @ Jason Davis – Rajasekar

+1

para eliminar el html se agrega en una estrecha cambio el método de cerca $ ("estrechos "). Vivo ('clic', function() { \t \t \t $ (". Pop") .slideFadeToggle(); \t \t \t $ ("# contact") removeClass ("seleccionado");. \t \t \t $ ("pop".) remove();. // añadir este ... \t \t \t return false; \t \t \t}); Esto corregirá el problema que aparece al hacer clic en el enlace más de una vez antes de cerrar la ventana emergente. buena respuesta por cierto, pulido y simple ... – Jonx

+21

Implementado: http: // jsfiddle.net/B4t3V/ – Yahel

94

Consulte jQuery UI Dialog. Se podría utilizar de esta manera:

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 hay, sugiero leer el documentation para tener una mejor idea de qué se puede hacer con él.

Fuente

2009-08-25 14:38:56 karim79

+0

¿Aparte de Jquery si tengo que incluir algún plugin? @Karim – Rajasekar

+6

@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 sea arrastrable y/o redimensionable, deberá incluir ui.draggable.js y ui.resizable.js. – karim79

+5

Hmm. Sería una mejor respuesta con un jsfiddle. – Bryce

3

No es un buen ejemplo sencillo de exactamente esto, aquí: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Fuente

2009-08-25 14:44:08 Evernoob

+0

¿Aparte de Jquery si tengo que incluir algún plugin? @Karim – Rajasekar

23

Puedo usar un plugin de jQuery llamado ColorBox, es

muy fácil de usar
liviano
personalizable
el diálogo emergente más bonito que he visto para jQuery todavía

Fuente

2009-08-25 17:05:57 JasonDavis

8

Visita esta URL

Jquery UI Dialog Demos

Fuente

2012-03-03 01:00:22 Yanni

4

Creo que este es un great tutorial en la escritura de un simple emergente jQuery.Además, se ve muy bien beautiful

Fuente

2012-07-27 09:03:17

8

Pruebe el Magnific Popup, es sensible y pesa alrededor de 3KB.

Fuente

2013-05-24 16:10:59 Marvin3

0

Aquí es un 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>

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

Fuente

2013-10-12 20:31:20 John29

3

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

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

Siéntase libre de utilizar y tweetear comentarios.

Fuente

2013-10-14 19:36:30

1

Ventana emergente simple mediante 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(); 
      }; 
     })();

Fuente

2016-06-04 09:55:50

+0

Aparece un error 'TypeError: dialog.show no es una función'. ¿Podría incluir un JSFiddle? – Magiranu

-1

SOLO CSS POPUP LÓGICA! INTENTE HACERLO. ¡FÁCIL! Creo que este truco mybe 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); 
}

Fuente

2016-11-25 07:57:37 zloctb

+0

¡No cierra! – vy32

Cómo generar una ventana emergente simple usando jQuery

Respuesta

Cuestiones relacionadas