Comment générer un popup simple à l'aide de jQuery

Question

Je suis en train de concevoir une page web. Lorsque nous cliquons sur le contenu de la div nommée mail, comment puis-je afficher une fenêtre popup contenant une étiquette email et une zone de texte ?

Answer 1

D'abord le CSS - modifiez-le 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="http://stackoverflow.com/">Cancel</a></p>
  </form>
</div>

<a href="http://stackoverflow.com/contact" id="contact">Contact Us</a>

Voici une démo et une mise en œuvre de jsfiddle.

En fonction de la situation, vous pouvez vouloir charger le contenu de la popup via un appel ajax. Il est préférable d'éviter cela si possible, car l'utilisateur risque d'avoir un délai plus important avant de voir le contenu. Voici quelques modifications que vous devrez apporter si vous adoptez cette approche.

Le HTML devient :

<div>
    <div class="messagepop pop"></div> 
    <a href="http://stackoverflow.com/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;
});

Answer 2

Vérifiez Dialogues jQuery UI . Vous l'utiliseriez comme ceci :

Le jQuery :

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

La majoration :

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

C'est fait !

Gardez à l'esprit que c'est le cas d'utilisation le plus simple qui soit. documentation pour avoir une meilleure idée de ce que l'on peut faire avec.

Answer 3

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

1. Très facile à utiliser
2. léger
3. personnalisable
4. la plus belle boîte de dialogue contextuelle que j'aie jamais vue pour jQuery

Answer 4

Essayez le Magnifique Popup il est réactif et ne pèse qu'environ 3KB.

Answer 5

Visitez cette url

Démonstrations de boîtes de dialogue Jquery UI