Jquery melaksanakan plug-in_jquery lapisan pop timbul

Masih terdapat banyak aplikasi untuk lapisan pop timbul, seperti log masuk dan beberapa operasi pada halaman yang sama kepunyaan orang lain, dan milik anda milik anda, jadi saya sentiasa mahu menulis pop timbul pemalam lapisan. Tanpa berlengah lagi, mari mulakan!

1: Lapisan topeng

Untuk memunculkan lapisan, anda mesti menggunakan lapisan topeng terlebih dahulu untuk menyekat halaman di bawah Lapisan topeng ini adalah skrin penuh dan halaman perlu menatal, jadi tetapkan kedudukan: ia juga mempunyai kesan ketelusan definisi saya Mask layer css, bernama mask

Salin kod Kod adalah seperti berikut:

.topeng
{
kedudukan: tetap;
lebar: 100%;
ketinggian: 100%;
warna latar belakang: putih;
Limpahan: tatal;
Penapis: alpha(opacity=50);
-moz-opacity: 0.5;
Kelegapan: 0.5;
indeks z: 20;
Limpahan: auto;
atas: 0px;
Kanan: 0px;
}

2: Parameter utama pemalam

tag: Mengapa anda memerlukan tag? Anda boleh menggunakan teg untuk menentukan elemen tersembunyi yang perlu muncul Anda boleh menentukan teg sebagai pemilih "#*", supaya elemen yang ditentukan boleh muncul. Di sini saya menetapkan lalai untuk ini.

Kandungan utama: Adakah parameter ini diperlukan? Saya tidak fikir ia sangat berguna Saya menetapkannya terutamanya untuk kawalan pelayan Jika semua ditambahkan pada badan, borang tidak boleh diserahkan. Tetapi selepas mengklik hantar, halaman akan dimuat semula dan lapisan pop timbul hilang, jadi saya rasa ia masih tidak berguna...

Salin kod Kod adalah seperti berikut:

$.fn.xsPop = fungsi (pilihan) {
        var lalai = {//Nilai lalai
              tajuk: "Tetingkap timbul", //Tajuk tetingkap
                lebar: 500,
Ketinggian: 400,
             teg: ini, //Pancarkan elemen yang perlu dimuatkan
              tutup: "Tutup",
                 utamaKandungan: "badan"//Bekas, untuk menyerahkan borang, tetapi penyerahan akan memuatkan semula halaman...
        };
         var options = $.extend(defaults, options); //Timpa dengan parameter yang diluluskan
This.each(fungsi () {
                     xsMain(options.title, options.width, options.hegth, options.tag, options.close, options.mainContent); //Pintu masuk utama pemalam
});
};

3: Gunakan fungsi xsMain untuk menambah elemen dan mengikat acara

Terdapat proses di sini, iaitu mengawal ketinggian dan lebar Jika tetapan melebihi ketinggian dan lebar skrin, ia akan menyesuaikan diri dengan skrin, sekali gus menghalang lapisan pop timbul daripada terlalu besar dan tidak boleh dikendalikan. Yang lain adalah untuk menambah html seperti biasa, saya menggunakan penambahan rentetan

Salin kod Kod adalah seperti berikut:

//Fügen Sie entsprechend den eingehenden Daten eine Maskenebene hinzu und öffnen Sie ein Eingabeaufforderungsfeld
Funktion xsMain(title, width, height, tag, close, mainContent) {
      var divmask = "

";
​​​​ $(mainContent).append(divmask);
          var xsPop1 = "

";
           var xsPop2 = " " title " " close "";
        var xsPop3 = "                                                                                                  var xsPop5 = "

";
      var allHtml = xsPop1 xsPop2 xsPop3 xsPop5;
​​​​ $(mainContent).append(allHtml);
​​​​ $(tag).show();
​​​​ $(tag).appendTo("#xsPopMain");
//Ermitteln Sie die Höhe und Breite des Browsers und treffen Sie anschließende Beurteilungen (Höhe überschreitet, Grenzgrenze ziehen)
clientHeight = window.screen.height;
clientWidth = window.screen.width;
If (height > clientHeight) {
             height = clientHeight - 100;
}
If (width > clientWidth) {
               width = clientWidth - 100;
}
           $("#xsPop").css({
„heigth“: Höhe „px“,
„width“: Breite „px“,
„margin-top“: „-“ (Höhe / 2) „px“,
„margin-left“: „-“ (Breite / 2) „px“
        });
          $("#xsPopMain").css("height", height - $("#xsPopHead").height());
           xsdrag("#xsPopHead", "#xsPop" //Drag-Aktion binden
             $("#xsColse").bind("click", function () { ClosePop(tag, mainContent); } //Schließaktion binden
}

4: Aktion schließen

Hier müssen Sie das Tag zuerst dem Container geben, sonst wird es beim späteren Entfernen zusammen entfernt und das Tag wird beim zweiten Auftauchen nicht gefunden.

Code kopieren Der Code lautet wie folgt:

//Schließe die Popup-Ebene
Funktion ClosePop(tag, mainContent) {
​​​​ $(mainContent).append(tag); //Speichern, andernfalls löscht $("#xsPop").remove() in Schritt 4 das Tag
          $(tag).hide();
          $(".mask").remove();
          $("#xsPop").remove();
}

5: Drag-Effekt

Methode 1: Beim ersten Mal stelle ich fest, dass es sich um eine Veranstaltung handelt, die Elemente verwendet, aber es ist leicht, Elemente zu verlieren und der Effekt ist nicht ideal

Code kopieren Der Code lautet wie folgt:

// Ziehen Sie die Popup-Ebene per Drag & Drop (fehlgeschlagene Methode, Objektverlust tritt auf)
//Control ist das Drag-Element, Tag ist das Action-Element, im Allgemeinen befindet sich das Control innerhalb des Tags
// Funktion ziehen(Steuerung, Tag) {
// // var isMove = false;
// var abs_x = 0, abs_y = 0;
// // $(control).mousedown(
// // Funktion (Ereignis) {
// // var top = $(tag).offset().top;
// // var left = $(tag).offset().left;
//                          abs_x = event.pageX - left;
// //                   abs_y = event.pageY - top;
// // isMove = true;
                                }).mouseleave(function () {
// // isMove = false;
// // });
// // $(control).mouseup(function () {
// // isMove = false;
// // });
// // $(document).mousemove(function (event) {
// // if (isMove) {
// // $(tag).css({
// // 'left': event.pageX - abs_x $(tag).width() / 2 - 1,
// // 'top': event.pageY - abs_y $(tag).height() / 2 - 1
// // // // }
// // return false;
// // });
// }

Methode 2, die Methode, die ich derzeit verwende, verwendet die Abwärts- und Aufwärtsbewegung des Dokuments, es gibt jedoch immer noch einige Probleme, das Problem der zu schnellen Bewegung und die Koordinaten weisen einen kleinen Sprung auf

Ich habe auch ein Problem gefunden, wenn ich die Popup-Ebene direkt an den oberen Bildschirmrand ziehe und loslasse, haha, Sie können sie nie zurückziehen oder klicken, um sie zu schließen. Ich habe mir die Popup-Ebene auf der Baidu-Homepage angesehen. Sie haben dieses Phänomen auch, aber nach dem Vergrößern und Verkleinern des Fensters kehrt die Popup-Ebene in die Mitte zurück. Ich habe es auch versucht, aber als ich onresize gebunden habe, schien es, dass es nicht nach unten verschoben werden konnte. Das von ihnen verwendete Ereignis war definitiv nicht onresize. Daher habe ich direkt festgestellt, dass die Mausposition nicht kleiner als 0 sein darf.

Code kopieren Der Code lautet wie folgt:

//Popup-Ebene per Drag-and-Drop ziehen
//Control ist das Drag-Element, Tag ist das Action-Element, im Allgemeinen befindet sich das Control innerhalb des Tags
Funktion xsdrag(control, tag) {
           $(control).mousedown(function (e)//emouse event
           {
               var offset = $(this).offset(); //Die Position von DIV auf der Seite
                 var x = e.pageX - offset.left //Den Abstand zwischen dem Mauszeiger und dem linken Rand des DIV-Elements ermitteln
                 var y = e.pageY - offset.top //Den Abstand zwischen dem Mauszeiger und der oberen Grenze des DIV-Elements ermitteln
$(document).bind("mousemove", function (ev)//Binden Sie das Mausbewegungsereignis, da der Cursor auch außerhalb des DIV-Elements eine Wirkung haben muss, sodass das Dokumentereignis anstelle des DIV-Elementereignisses                 {
If (ev.pageY <= 0) { return }//Verhindern, dass der Rand geschlossen und gezogen wird, nachdem er über den Bildschirm hinausgeht
                     $(tag).css({
                    'left': ev.pageX - x $(tag).width() / 2, // Ich muss dies zu meinem Layout hinzufügen
„top“: ev.pageY - y $(tag).height() / 2
                });
            });
        });
$(document).mouseup(function () {
               $(this).unbind("mousemove");
        });
}

6: Stylesheet

Das Layout der Popup-Ebene verwendet negative Werte für den oberen und linken Rand, daher füge ich in meinem js die Hälfte der Höhe und Breite hinzu

Code kopieren Der Code lautet wie folgt:

.mask
{
Position: fest;
Breite: 100 %;
Höhe: 100 %;
Hintergrundfarbe: weiß;
Überlauf: scrollen;
Filter: alpha(opacity=50);
-moz-Opazität: 0,5;
Deckkraft: 0,5;
Z-Index: 20;
Überlauf: automatisch;
oben: 0px;
Rechts: 0px;
}
.PopUp
{
Polsterung: 0px;
Position: absolut;
Z-Index: 21 !important;
Hintergrundfarbe: Weiß;
Randstil: fest, fest, fest, fest;
Rahmenbreite: 1px;
Randfarbe: #C0C0C0;
Links: 50 %;
oben: 50 %;
}
.PopHead
{
Hintergrundfarbe: #F0F0F0;
Rand-Bottom-Stil: einfarbig;
Rand-Breite unten: 1px;
Farbe des unteren Randes: #C0C0C0;
Höhe: 30px;
Cursor: bewegen;
Clip: rect(0px, auto, auto, 0px);
}
.PopHead b
{
float: links;
Anzeige: block;
Farbe: #C0C0C0;
Schriftfamilie: System;
Schriftgröße: mittel;
Zeilenhöhe: 30px;
Texteinzug: 2em;
}
.PopHead span
{
float: rechts;
Anzeige: block;
Textausrichtung: rechts;
Zeilenhöhe: 30px;
Cursor: Zeiger;
Texteinzug: 5px;
Farbe: #FF0000;
Schriftgröße: 12pt;
}
.PopMain
{
Polsterung: 10px;
Überlauf: automatisch;
}

7: Nutzung der Seiten

Testserverkontrollen können Formulare senden

Code kopieren Der Code lautet wie folgt:

           $(document).ready(function () {
                $("#btnPop").click(function () {
              var options = {
                       Titel: „mein Pop“,
                          Breite: 500,
Höhe: 400,
                                      close: „close“,
                            mainContent: "form"
                }
                   $("#pop1").xsPop(options);
            });
        });

Okay, das ist es. Ursprünglich wollte ich einen Rand ziehen, um die Größe zu ändern, stellte aber fest, dass das einige Zeit in Anspruch nehmen würde, also habe ich damit aufgehört. Um ehrlich zu sein, denke ich, dass das Ziehen nicht viel Sinn macht, und die Größe der Randkontrolle macht auch nicht viel Sinn, weil ich den Überlauf eingestellt habe und Bildlaufleisten angezeigt werden.