So generieren Sie ein einfaches Popup mit jQuery

Lesezeit: 5 Minuten

So generieren Sie ein einfaches Popup mit jQuery
Rajasekar

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

  • 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

    6. Juni 16 um 08:24 Uhr

So generieren Sie ein einfaches Popup mit jQuery
Andy Gaskel

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="https://stackoverflow.com/">Cancel</a></p>
  </form>
</div>

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

Hier ist eine Jsfiddle-Demo und -Implementierung.

Abhängig von der 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 es dem Benutzer möglicherweise eine größere Verzögerung gibt, bevor er den Inhalt sieht. Hier sind einige Änderungen, die Sie vornehmen möchten, wenn Sie diesen Ansatz wählen.

HTML wird zu:

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

  • Es funktioniert, danke. Aber ich werde ein weiteres Tastenanrufregister hinzufügen. Wenn darauf geklickt wird, sollte das Registrierungsformular erscheinen. Dafür habe ich die gleiche Funktion eingefügt und die Namen von IDs und Klassen geändert. Das Problem ist, wenn ich auf die Schließen-Schaltfläche des Registrierungsformulars klicke, wird das Kontaktformular umgeschaltet. Brauche Hilfe @jason Davis

    – Rajasekar

    26. August 09 um 7:51 Uhr

  • Um den HTML-Code zu entfernen, den Sie beim Schließen hinzufügen, ändern Sie die Schließmethode in $(.close”).live(‘click’, function() { $(“.pop”).slideFadeToggle(); $(“#contact”) .removeClass(“ausgewählt”); $(“.pop”).remove(); //hinzufügen… 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

    25. Mai ’10 um 23:10 Uhr


  • @yahelc Versuchen Sie, mehr als einmal hintereinander auf „Anmelden“ zu klicken, und klicken Sie dann auf „Abbrechen“. Uh-oooohhh.

    – AVProgrammierer

    5. Oktober 11 um 0:18 Uhr

  • Ich stimme dem Teil “großartiger Code” nicht ganz zu. Viele Inhalte sind in Javascript fest codiert. Ja, wir alle haben Javascript in unseren Browsern, aber es ist einfach nicht der richtige Weg, um Web zu betreiben. HTML ist für Inhalt, js für “Make-up”. Die Antwort von Karim79 ist aus meiner Sicht besser. Fügen Sie Ihr Markup in den HTML-Code ein, wo es hingehört, verstecken Sie es und 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 zu stellen

    – ZolaKt

    19. Dezember 11 um 9:32 Uhr


  • Gemäß jQuery-Website, Ab jQuery 1.7 ist die .live()-Methode veraltet. Benutzen .an() um Event-Handler anzuhängen. Benutzer älterer jQuery-Versionen sollten .delegate() statt .live() verwenden.. Also ersetzte ich .Live mit .an. Klicken Sie hier, um eine allgemeinere Version von Andys Code anzuzeigen. Außerdem habe ich den CDN-Link für eine neuere Version von jQuery auf der eigentlichen Seite verwendet <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>

    – Vulkanrabe

    04.09.12 um 06:25

Kasse jQuery-UI-Dialog. Sie würden es wie folgt verwenden:

Die jQuery:

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

Das Markup:

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

Fertig!

Denken Sie daran, dass dies der einfachste Anwendungsfall ist, den es gibt. Ich würde vorschlagen, das zu lesen Dokumentation um eine bessere Vorstellung davon zu bekommen, was man damit machen kann.

  • Muss ich außer Jquery irgendein Plugin einbinden?? @Karim

    – Rajasekar

    25. August 2009 um 14:55 Uhr

  • @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 Sie möchten, dass der Dialog ziehbar und/oder in der Größe veränderbar ist, müssen Sie ui.draggable.js und ui.resizable.js einschließen.

    – karim79

    25. August 2009 um 15:00 Uhr

  • Hmm. Wäre eine bessere Antwort mit einem jsfiddle.

    – Brice

    2. Januar 14 um 1:04 Uhr

1644243126 654 So generieren Sie ein einfaches Popup mit jQuery
Jason Davis

Ich verwende ein jQuery-Plugin namens ColorBox, es ist

  1. Sehr einfach zu bedienen
  2. Leicht
  3. anpassbar
  4. das schönste Popup-Dialogfeld, das ich bisher für jQuery gesehen habe

Versuchen Sie die Großartiges Popup, reagiert und wiegt nur etwa 3 KB.

Besuchen Sie diese URL

Jquery-UI-Dialog-Demos

Ich denke, das ist ein tolle Anleitung beim Schreiben eines einfachen JQuery-Popups. Außerdem sieht es sehr aus schön

1644243126 776 So generieren Sie ein einfaches Popup mit jQuery
Evernoob

Ein gutes, einfaches Beispiel dafür gibt es hier: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

  • Muss ich außer Jquery irgendein Plugin einbinden?? @Karim

    – Rajasekar

    25. August 2009 um 14:52 Uhr

.

810870cookie-checkSo generieren Sie ein einfaches Popup mit jQuery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy