Comment générer un popup simple en utilisant jQuery


217

Je conçois une page Web. Lorsque nous cliquons sur le contenu d'un e-mail nommé div, comment puis-je afficher une fenêtre contextuelle contenant une étiquette e-mail et une zone de texte?


1
J'ai trouvé cette réponse très utile pour des alertes rapides sans toucher au HTML ou CSS existant. Il crée et montre un div en utilisant simplement jQuery de js.
mabi

Réponses:


241

D'abord le CSS - ajustez ceci comme vous le souhaitez:

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

Et le 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);
};

Et enfin le 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>

Voici une démonstration et une implémentation de jsfiddle.

Selon la situation, vous souhaiterez peut-être charger le contenu contextuel via un appel ajax. Il est préférable d'éviter cela si possible car cela peut donner à l'utilisateur un délai plus important avant de voir le contenu. Voici quelques modifications que vous voudrez apporter si vous adoptez cette approche.

Le HTML devient:

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

Et l'idée générale du JavaScript devient:

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

Son fonctionnement, merci. Mais je vais inclure un autre registre d'appels de bouton. quand il est cliqué, le formulaire d'inscription devrait apparaître. Pour cela, j'ai inclus la même fonction et changé le nom des identifiants et des classes. Le problème est que lorsque je clique sur le bouton de fermeture du formulaire d'inscription, il bascule le formulaire de contact. Besoin d'aide @jason Davis
Rajasekar

1
pour supprimer le html que vous ajoutez à la fermeture, changez la méthode close en $ (". close"). live ('click', function () {$ (". pop"). slideFadeToggle (); $ ("# contact") .removeClass ("selected"); $ (". pop"). remove (); // add this ... return false;}); cela corrigera le problème que vous obtenez lorsque vous cliquez sur le lien plusieurs fois avant de fermer la fenêtre contextuelle. belle réponse d'ailleurs, lisse et simple ...
Jonx

10
@yahelc Essayez de cliquer sur "S'inscrire" plusieurs fois de suite, puis cliquez sur "Annuler". Uh-oooohhhh.
AVProgrammer

Je ne suis pas tout à fait d'accord sur la partie "grand code". Beaucoup de contenu est codé en dur en javascript. Oui, nous avons tous du javascript dans nos navigateurs il y a quelques jours, mais ce n'est tout simplement pas la bonne façon de faire du Web. HTML est pour le contenu, js pour "maquillage". La réponse de Karim79 est meilleure de mon point de vue. Incluez votre balisage dans le code HTML où il appartient, cachez-le, affichez-le et affichez-le sous forme de popup. Solution beaucoup plus propre que d'imprimer beaucoup de HTML directement à partir de javascript. Vous n'avez pas besoin d'utiliser jQueryUI si vous n'en avez pas besoin, il y a un million de façons de mettre du contenu dans une popup
ZolaKt

12
Selon le site Web jQuery , à partir de jQuery 1.7, la méthode .live () est déconseillée. Utilisez .on () pour attacher des gestionnaires d'événements. Les utilisateurs d'anciennes versions de jQuery doivent utiliser .delegate () de préférence à .live (). . J'ai donc remplacé .live par .on . Cliquez ici pour voir une version plus générique du code d'Andy . De plus, j'ai utilisé le lien CDN pour une version plus récente de jQuery sur la page actuelle<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
vulcan raven

98

Consultez la boîte de dialogue jQuery UI . Vous l'utiliseriez comme ceci:

La jQuery:

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

Le balisage:

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

Terminé!

Gardez à l'esprit qu'il s'agit du cas d'utilisation le plus simple qui soit, je suggère de lire la documentation pour avoir une meilleure idée de ce qui peut être fait avec.


Autre que Jquery si je dois inclure un plugin ?? @Karim
Rajasekar

8
@Rajasekar - Vous devrez télécharger le bundle jQuery UI et au moins inclure ui.core.js et ui.dialog.js pour obtenir un dialogue. Si vous souhaitez que la boîte de dialogue soit déplaçable et / ou redimensionnable, vous devrez inclure ui.draggable.js et ui.resizable.js.
karim79

6
Hmm. Serait une meilleure réponse avec un jsfiddle.
Bryce

23

J'utilise un plugin jQuery appelé ColorBox , c'est

  1. Très simple d'utilisation
  2. poids léger
  3. personnalisable
  4. la plus belle boîte de dialogue contextuelle que j'ai vue pour jQuery





3

Plugin popup Modal extrêmement léger. POPELT - http://welbour.com/labs/popelt/

Il est léger, prend en charge les popups imbriqués, orienté objet, prend en charge les boutons dynamiques, réactifs et bien plus encore. La prochaine mise à jour comprendra des soumissions de formulaires Popup Ajax, etc.

N'hésitez pas à utiliser et à tweeter les commentaires.


2

Fenêtre contextuelle simple en utilisant html5 et 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();  
            };
        })();

J'ai une TypeError: dialog.show is not a functionerreur. Pourriez-vous s'il vous plaît inclure un JSFiddle?
Magiranu

0

Voici un popup très 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>

Une solution plus flexible peut être trouvée dans ce tutoriel: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Voici close.png pour l'exemple.


0

SEULE LOGIQUE CSS POPUP! ESSAYEZ-LE. FACILE! Je pense que cela peut être populaire à l'avenir

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

Ça ne ferme pas!
vy32
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.