jQuery-Eingabeaufforderungscode-sharing_jquery

Code 1:

Code kopieren Der Code lautet wie folgt:

Tipp 1.

Tipp 2.

Eingebauter Tipp 1.

Eingebauter Tipp 2.

Code kopieren Der Code lautet wie folgt:

$(function(){
              $(".tooltip").mouseenter(function(e){
This.mytitle=this.title
This.title=""
              var a="

" this.mytitle "

"
                  $("body").append(a);
                    $("div").css({
„top“: (e.pageY y) „px“,
„left“: (e.pageX x) „px“
                   }).show("fast")
               }).mouseout(function(){
This.title= this.mytitle;
                   $("div").remove();
             });
})

Lernerfahrung:

Hängen Sie keine div-Elemente unter dem p-Tag an, da sonst eine große Abweichung auftritt!

es stellt sich heraus! Es gibt einen Unterschied zwischen this und $("this"), wenn das obige
Das Umschreiben von this.title in $("this").attr("title") führt dazu, dass das folgende Mouseout-Ereignis nicht auf den gespeicherten Titel zugreifen kann

Code 2:

CSS zitieren: jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css

Zitieren von js: jqueryui/js/jquery-ui-1.8.18.custom.min.js

Code kopieren Der Code lautet wie folgt:

<script><br> $( "#dialog:ui-dialog" ).dialog( "destroy" );<br> ​  <br> $( "#dialog-message" ).dialog({<br>                                       <br> Höhe: 120,<br>           Breite: 220,<br>         modal: true,<br> Schaltflächen: {<br> „Nein“: function() {<br>                        //etwas tun<br> $ (This) .dialog („schließen“);             },<br> „Ja“: function() {<br>                        //etwas tun<br> $( this ).dialog( "close" );<br>             }<br> }<br> });<br> </script>

Ich bin ein Popup-Meldungsfeld

Code 3:

Verwenden Sie die Javascript-Popup-Layer-Komponente easyDialog

Nachdem wir easyDialog eine Zeit lang verwendet haben, haben wir einige Probleme zusammengefasst, die während der Verwendung aufgetreten sind. Kürzlich haben wir einige Zeit damit verbracht, den ursprünglichen Code zu rekonstruieren und zu optimieren, und einige neue Funktionen hinzugefügt. In der Originalversion ging es lediglich darum, die Grundfunktionen einer einfachen Popup-Ebene zu realisieren. Aus Projektsicht ging es jedoch darum, wie das Projekt schnell abgeschlossen werden kann. In dieser Version geht es jedoch nicht nur um die Realisierung der Grundfunktionen, sondern auch darum, wie um die Popup-Ebene besser und effizienter zu gestalten. Einfache Anwendung auf Projekte.
Neue Funktionen in easyDialog v2.0:

1. Die Standardvorlage für den Inhalt der Popup-Ebene wurde hinzugefügt. Wenn es sich nur um einige einfache Anwendungen handelt, müssen Sie die Struktur des Popup-Ebeneninhalts nicht schreiben, sondern nur einige einfache Parameter übergeben. Die ursprüngliche Verwendungsmethode:

Code kopieren Der Code lautet wie folgt:

easyDialog.open({
Container: 'demoBox'
});

Verwenden Sie die Standardinhaltsvorlage, dann kann der Containerparameter wie folgt verwendet werden:

Code kopieren Der Code lautet wie folgt:

easyDialog.open({
Behälter: {
Kopfzeile: „Titel der Pop-up-Ebene“,
Inhalt: „Willkommen bei easyDialog : )“,
jaFn : btnFn,
NoFn: wahr
}
});

Der angezeigte Effekt ist wie folgt:

Wenn Sie den Stil der Standardinhaltsvorlage ändern möchten, können Sie die Datei easydialog.css im heruntergeladenen Dokument ändern, um den gewünschten Stil zu erreichen.
2. Ein Drag-and-Drop-Effekt wurde hinzugefügt, um die Popup-Ebene für ein besseres Benutzererlebnis zu sorgen. Der Inhalt der Popup-Ebene kann angepasst werden, um den Drag-and-Drop-Effekt einfach zu erzielen.
3. Ein Caching-System und ein Mikroereignisverarbeitungssystem wurden intern hinzugefügt, und der Inhalt der Popup-Ebene wurde ebenfalls zwischengespeichert, um die Leistung der Popup-Ebene zu verbessern.
Darüber hinaus wurde die Benennung eines Parameters geändert. Das ursprüngliche isOverlay wurde in „overlay“ geändert, und die IDs jedes Elements der ursprünglichen Popup-Ebene wurden ebenfalls umbenannt, um Konflikte so weit wie möglich zu vermeiden.

Die oben genannten 3 Arten von Prompt-Effekten werden von mir häufig verwendet. Sie können sie entsprechend Ihren eigenen Projektanforderungen frei verwenden