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?

217
Rajasekar 25 ago. 2009 a las 18:37

11 respuestas

La mejor respuesta

Primero la CSS - pellizca 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 la 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 la 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;
});
241
Andy Gaskell 26 jul. 2018 a las 00:34

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);
}
0
zloctb 25 nov. 2016 a las 07:57

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/ notas / jquery-modal-tutorial / Aquí está close.png para la muestra.

0
John29 12 oct. 2013 a las 20:31

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();  
            };
        })();
2
Liviu Iancu 7 jul. 2016 a las 16:17

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.

3
Elton Jain 14 oct. 2013 a las 19:36

Aquí hay un buen ejemplo simple de exactamente esto: http : //www.queness.com/post/77/simple-jquery-modal-window-tutorial

3
Evernoob 25 ago. 2009 a las 14:44

Creo que este es un gran tutorial al escribir una simple ventana emergente de jquery. Además, se ve muy beautiful

4
andy boot 1 ene. 2014 a las 14:32

Visita esta url

Demostraciones de diálogo de la interfaz de usuario de Jquery

8
Yanni 3 mar. 2012 a las 01:00

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

9
Marvin3 24 may. 2013 a las 16:10

Utilizo un complemento jQuery llamado ColorBox, es

  1. Muy fácil de usar
  2. ligera
  3. personalizable
  4. el mejor diálogo emergente que he visto para jQuery todavía
23
Peter Mortensen 26 may. 2011 a las 21:28

Consulte 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 obtener Una mejor idea de lo que se puede hacer con él.

98
karim79 25 ago. 2009 a las 14:38