So generieren Sie mit jQuery ein einfaches Popup

217

Ich entwerfe eine Webseite. Wie kann ich ein Popup-Fenster mit einer Label-E-Mail und einem Textfeld anzeigen, wenn wir auf den Inhalt von div namens mail klicken?

Rajasekar
quelle
1
Ich fand diese Antwort sehr nützlich für schnelle Benachrichtigungen, ohne das vorhandene HTML oder CSS zu berühren. Es erstellt und zeigt ein div nur mit jQuery von js.
Mabi

Antworten:

241

Zuerst das CSS - optimieren Sie dies, wie Sie möchten:

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

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

Und zum Schluss das 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>

Hier ist eine jsfiddle-Demo und -Implementierung.

Je nach Situation möchten Sie den Popup-Inhalt möglicherweise über einen Ajax-Aufruf laden. Es ist am besten, dies nach Möglichkeit zu vermeiden, da dies dem Benutzer eine größere Verzögerung geben kann, bevor er den Inhalt sieht. Hier einige Änderungen, die Sie vornehmen möchten, wenn Sie diesen Ansatz wählen.

HTML wird:

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

Und die allgemeine Idee des JavaScript wird:

$("#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;
});
Andy Gaskell
quelle
Es funktioniert, danke. Aber ich werde ein weiteres Tastenanrufregister hinzufügen. Wenn Sie darauf klicken, sollte das Registrierungsformular angezeigt werden. Dafür habe ich die gleiche Funktion aufgenommen und den Namen von IDs und Klassen geändert. Das Problem ist, wenn ich auf die Schaltfläche zum Schließen des Registrierungsformulars klicke, wird das Kontaktformular umgeschaltet. Brauchen Sie Hilfe @jason Davis
Rajasekar
1
Um das beim Schließen hinzugefügte HTML zu entfernen, ändern Sie die Methode close in $ (". close"). live ('click', function () {$ (". pop"). slideFadeToggle (); $ ("# contact") .removeClass ("selected"); $ (". pop"). remove (); // füge dies hinzu ... return false;}); Dadurch wird das Problem behoben, das auftritt, wenn Sie mehr als einmal auf den Link klicken, bevor Sie das Popup schließen. nette Antwort übrigens, glatt und einfach ...
Jonx
10
@yahelc Klicken Sie mehrmals hintereinander auf "Anmelden" und dann auf "Abbrechen". Uh-oooohhhh.
AVProgrammer
Ich stimme dem Teil "Großartiger Code" nicht ganz zu. Viele Inhalte sind in Javascript fest codiert. Ja, wir haben alle Tage dort Javascript in unseren Browsern, aber es ist einfach nicht der richtige Weg, um Web zu machen. HTML ist für Inhalt, js für "Make-up". Karim79 Antwort ist aus meiner Sicht besser. Fügen Sie Ihr Markup in den HTML-Code ein, in den es gehört, verstecken Sie es, zeigen Sie es einfach an und rufen Sie es als Popup auf. Viel sauberere Lösung als viel HTML direkt aus Javascript zu drucken. Sie müssen die jQueryUI nicht verwenden, wenn Sie sie nicht benötigen. Es gibt eine Million Möglichkeiten, Inhalte in ein Popup
einzufügen
12
Laut der jQuery-Website ist die .live () -Methode ab jQuery 1.7 veraltet. Verwenden Sie .on () , um Ereignishandler anzuhängen. Benutzer älterer Versionen von jQuery sollten .delegate () anstelle von .live () verwenden. . Also habe ich .live durch .on ersetzt . Klicken Sie hier, um eine allgemeinere Version von Andys Code zu sehen . Außerdem habe ich den CDN-Link für eine neuere Version von jQuery auf der aktuellen Seite verwendet<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
Vulkanrabe
98

Schauen Sie sich den jQuery UI-Dialog an . Sie würden es so verwenden:

Die jQuery:

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

Das Markup:

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

Getan!

Denken Sie daran, dass dies der einfachste Anwendungsfall ist, den es gibt. Ich würde empfehlen, die Dokumentation zu lesen , um eine bessere Vorstellung davon zu bekommen, was damit getan werden kann.

karim79
quelle
Abgesehen von Jquery, ob ich ein Plugin einbinden muss? @ Karim
Rajasekar
8
@Rajasekar - Sie müssen das jQuery UI-Bundle herunterladen und mindestens ui.core.js und ui.dialog.js einschließen, um einen Dialog zu erhalten. Wenn der Dialog ziehbar und / oder in der Größe veränderbar sein soll, müssen Sie ui.draggable.js und ui.resizable.js einschließen.
Karim79
6
Hmm. Wäre eine bessere Antwort mit einer jsfiddle.
Bryce
23

Ich benutze ein jQuery - Plugin namens ColorBox , es ist

  1. Sehr einfach zu bedienen
  2. Leicht
  3. anpassbar
  4. Der schönste Popup-Dialog, den ich bisher für jQuery gesehen habe
JasonDavis
quelle
9

Probieren Sie das Magnific Popup aus , es reagiert und wiegt nur etwa 3 KB.

Marvin3
quelle
4

Ich denke, dies ist ein großartiges Tutorial zum Schreiben eines einfachen JQuery-Popups. Außerdem sieht es sehr schön aus

Andy Boot
quelle
3

Extrem leichtes modales Popup-Plugin. POPELT - http://welbour.com/labs/popelt/

Es ist leichtgewichtig, unterstützt verschachtelte Popups, ist objektorientiert, unterstützt dynamische Schaltflächen, reagiert und vieles mehr. Das nächste Update wird Popup Ajax-Formularübermittlungen usw. enthalten.

Fühlen Sie sich frei, Feedback zu verwenden und zu twittern.

Elton Jain
quelle
2

Einfaches Popup-Fenster mit HTML5 und 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();  
            };
        })();
Arshid KV
quelle
Ich bekomme eine TypeError: dialog.show is not a functionFehlermeldung. Könnten Sie bitte eine JSFiddle einschließen?
Magiranu
0

Hier ist ein sehr einfaches Popup:

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

Eine flexiblere Lösung finden Sie in diesem Tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Hier ist close.png für das Beispiel.

John29
quelle
0

NUR CSS POPUP LOGIC! VERSUCHEN SIE ES. EINFACH! Ich denke, dass dies in Zukunft sehr beliebt sein wird

            <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);
}
zloctb
quelle
Es schließt nicht!
vy32