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

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?

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

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.

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

Essayez le Magnific Popup , il est réactif et pèse environ 3 Ko.

Visitez cette URL

Démonstrations de la boîte de dialogue Jquery UI

Je pense que c'est un excellent tutoriel sur l'écriture d'un simple popup jquery. De plus, il est très beau

Il y a un bon et simple exemple d'exactement cela, ici: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

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.

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

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.

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