web-dev-qa-db-fra.com

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

Je conçois une page Web. Lorsque nous cliquons sur le contenu du courrier nommé nommé, comment puis-je afficher une fenêtre contextuelle contenant un libellé email et une zone de texte?

javascriptjquerycssajaxpopup
212
Rajasekar

D'abord le CSS - Tweak this comme bon vous semble:

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émo et une implémentation de jsfiddle.

En fonction de la situation, vous pouvez 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 long avant de voir le contenu. Voici quelques changements que vous voudrez faire si vous prenez cette approche.

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;
});
238
Andy Gaskell

Consultez Dialogue jQuery UI . Vous l'utiliseriez comme ceci:

Le jQuery:

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

Le balisage:

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

Terminé!

N'oubliez pas que c'est le cas d'utilisation le plus simple qui existe, je vous suggère de lire la documentation pour avoir une meilleure idée de ce que l'on peut en faire. 

96
karim79

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

  1. Très facile à utiliser
  2. poids léger
  3. personnalisable
  4. le plus beau dialogue popup que j'ai vu pour jQuery encore
23
JasonDavis

Visitez cette url

Démonstrations de dialogue Jquery UI

8
Yanni

Essayez le Magnific Popup , il est réactif et pèse à peu près 3KB.

8
Marvin3

Je pense que c’est un excellent tutoriel sur la rédaction d’un simple popup jQuery. De plus, il a l'air très beau

4
andy boot

Il existe un bon exemple simple de cela, ici: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

3
Evernoob

Plugin contextuel extrêmement léger et modal . POPELT - http://welbour.com/labs/popelt/

Elle est légère, prend en charge les fenêtres contextuelles imbriquées, orientée objet, prend en charge les boutons dynamiques, réactif, et bien d’autres choses encore. La prochaine mise à jour inclura les soumissions de formulaires Popup Ajax, etc.

N'hésitez pas à utiliser et tweetez vos commentaires.

3
Elton Jain

Fenêtre popup 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();  
            };
        })();
1
Arshid KV

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
John29

LOGIQUE POPUP CSS UNIQUEMENT! Essayez de le faire. FACILE! Je pense que cela sera populaire dans le futur

            <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