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?
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:
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.
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>
<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.
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
Sehr einfach zu bedienen
Leicht
anpassbar
Der schönste Popup-Dialog, den ich bisher für jQuery gesehen habe
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.
<dialog id="window"><h3>SampleDialog!</h3><p>Lorem ipsum dolor sit amet</p><button id="exit">CloseDialog</button></dialog><button id="show">ShowDialog</button>
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 modalreturnfunction(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>
Antworten:
Zuerst das CSS - optimieren Sie dies, wie Sie möchten:
Und das JavaScript:
Und zum Schluss das HTML:
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:
Und die allgemeine Idee des JavaScript wird:
quelle
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
Schauen Sie sich den jQuery UI-Dialog an . Sie würden es so verwenden:
Die jQuery:
Das Markup:
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.
quelle
Ich benutze ein jQuery - Plugin namens ColorBox , es ist
quelle
Probieren Sie das Magnific Popup aus , es reagiert und wiegt nur etwa 3 KB.
quelle
Besuchen Sie diese URL
Jquery UI Dialog Demos
quelle
Ich denke, dies ist ein großartiges Tutorial zum Schreiben eines einfachen JQuery-Popups. Außerdem sieht es sehr schön aus
quelle
Hier gibt es ein gutes, einfaches Beispiel dafür: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
quelle
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.
quelle
Einfaches Popup-Fenster mit HTML5 und Javascript.
HTML: -
JavaScript: -
quelle
TypeError: dialog.show is not a function
Fehlermeldung. Könnten Sie bitte eine JSFiddle einschließen?Hier ist ein sehr einfaches Popup:
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.
quelle
NUR CSS POPUP LOGIC! VERSUCHEN SIE ES. EINFACH! Ich denke, dass dies in Zukunft sehr beliebt sein wird
quelle