Come generare un semplice popup usando jQuery


217

Sto progettando una pagina web. Quando facciamo clic sul contenuto della div con nome di posta, come posso mostrare una finestra pop-up contenente un'etichetta e-mail e una casella di testo?


1
Ho trovato questa risposta molto utile per avvisi rapidi senza toccare l'HTML o CSS esistente. Crea e mostra un div semplicemente usando jQuery da js.
mabi,

Risposte:


241

Innanzitutto il CSS - modifica questo come preferisci:

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;
}

E il 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);
};

E infine l'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>

Ecco una demo e un'implementazione di jsfiddle.

A seconda della situazione, potresti voler caricare i contenuti popup tramite una chiamata Ajax. È meglio evitarlo, se possibile, in quanto potrebbe dare all'utente un ritardo più significativo prima di vedere il contenuto. Qui un paio di modifiche che vorrai fare se segui questo approccio.

HTML diventa:

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

E l'idea generale di JavaScript diventa:

$("#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;
});

Funziona, grazie. Ma includerò un altro registro delle chiamate dei pulsanti. quando viene cliccato, il modulo di registrazione dovrebbe apparire. Per questo ho incluso la stessa funzione e ho cambiato il nome di ID e classi. Il problema è quando faccio clic sul pulsante di chiusura del modulo di registrazione, attiva o disattiva il modulo di contatto. Hai bisogno di aiuto @jason Davis
Rajasekar il

1
per rimuovere l'html che aggiungi alla chiusura modifica il metodo di chiusura in $ (". chiudi"). live ('click', function () {$ (". pop"). slideFadeToggle (); $ ("# contact") .removeClass ("selected"); $ (". pop"). remove (); // aggiungi questo ... return false;}); questo consentirà di correggere il problema che si verifica quando si fa clic sul collegamento più di una volta prima di chiudere il popup. bella risposta a proposito,
elegante

10
@yahelc Prova a fare clic su "Iscriviti" più di una volta consecutivamente, quindi fai clic su "Annulla". Uh-oooohhhh.
AVProgrammer,

Non sono del tutto d'accordo sulla parte del "codice eccezionale". Molti contenuti sono hardcoded in javascript. Sì, tutti noi abbiamo javascript nei nostri browser lì giorni, ma semplicemente non è il modo giusto di fare web. HTML è per contenuto, js per "trucco". La risposta di Karim79 è migliore dal mio punto di vista. Includi il tuo markup nel codice HTML a cui appartiene, nascondilo e mostralo e visualizzalo come popup. Soluzione molto più pulita rispetto alla stampa di molto HTML direttamente da JavaScript. Non devi usare jQueryUI se non ne hai bisogno, ci sono milioni di modi per mettere un po 'di contenuto in un popup
ZolaKt

12
Secondo il sito Web jQuery , A partire da jQuery 1.7, il metodo .live () è obsoleto. Utilizzare .on () per collegare i gestori di eventi. Gli utenti di versioni precedenti di jQuery dovrebbero utilizzare .delegate () in preferenza a .live (). . Così ho sostituito .Live con .on . Clicca qui per vedere una versione più generica del codice di Andy . Inoltre, ho usato il collegamento CDN per la versione più recente di jQuery nella pagina attuale<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
vulcan raven

98

Dai un'occhiata alla finestra di dialogo dell'interfaccia utente di jQuery . Lo useresti così:

Il jQuery:

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

Il markup:

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

Fatto!

Tieni presente che si tratta del caso d'uso più semplice che ci sia, suggerirei di leggere la documentazione per avere un'idea migliore di cosa si possa fare.


A parte Jquery se devo includere qualche plugin ?? @Karim
Rajasekar,

8
@Rajasekar - Dovrai scaricare il bundle dell'interfaccia utente jQuery e almeno includere ui.core.js e ui.dialog.js per ottenere un dialogo. Se desideri che il dialogo sia trascinabile e / o ridimensionabile, dovrai includere ui.draggable.js e ui.resizable.js.
karim79,

6
Hmm. Sarebbe una risposta migliore con un jsfiddle.
Bryce,

23

Uso un plugin jQuery chiamato ColorBox , lo è

  1. Molto facile da usare
  2. leggero
  3. personalizzabile
  4. la finestra di dialogo popup più bella che abbia mai visto per jQuery





3

Plugin popup modale estremamente leggero. POPELT - http://welbour.com/labs/popelt/

È leggero, supporta popup nidificati, orientato agli oggetti, supporta pulsanti dinamici, reattivi e molto altro. Il prossimo aggiornamento includerà invii di moduli Popup Ajax ecc.

Sentiti libero di usare e tweet feedback.


2

Semplice finestra popup utilizzando html5 e 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();  
            };
        })();

Ho ricevuto un TypeError: dialog.show is not a functionerrore Potresti per favore includere un JSFiddle?
Magiranu,

0

Ecco un popup molto semplice:

<!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>

In questo tutorial è possibile trovare una soluzione più flessibile: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Ecco close.png per l'esempio.


0

SOLO LOGICA POPUP CSS! Provalo. FACILE! Penso che questo possa essere un hack popolare in 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);
}

Non si chiude!
vy32,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.