Der ursprüngliche Plan bestand darin, eine solche Anforderung zu erreichen: Der Klick an der Rezeption löst eine Geschäftsaktion aus, und der Benutzer muss Informationen ergänzen, ohne die Seite zu springen, und Informationen in Form von Popup-Fenstern ergänzen. Es war beunruhigt, wurde aber am Ende nicht verwendet.
Der Code ist immer noch etwas kraftvoll und bietet eine grobe Implementierungslogik.
Implementierungsidee: Legen Sie eine Maske im Fenster, um die originale Schaltfläche für die Fensterfunktion zu blockieren und Popup-Fenster bei der absoluten Positionierung auf der oberen Schicht der Maske zu erkennen. Die Dateninteraktion im Popup-Fenster ist die Ajax-Methode. Verwenden Sie Onclick, um das Pop-up-Event zu starten.
Schlüsseldetails: Das Popup-Fenster und das ursprüngliche Formular sind im Wesentlichen dieselbe Seite. Für die Bequemlichkeit der Beschreibung rufen wir das untere Formular das übergeordnete Formular und das Popup-Fenster als Kinderformular an. Um die Interaktion des übergeordneten Formulars zu erreichen, müssen Sie einige spezielle Beschriftungen im übergeordneten Formular erstellen, damit der Selektor ein neues DOM -Objekt auswählen und einfügen kann.
Schauen Sie sich zunächst den Code des übergeordneten Formulars an. Ich habe Kommentare zum Schlüssel Teil.
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <meta name = "content" content "content" content "initial =" initial-scale = 1.0, user-scalable name = "Apple-Mobile-Web-App-fähige" content = "yes"> <meta name = "Apple-mobile-Web-App-status-bar" content = "schwarz"> <title> testen pop-up </title> <script type = "text/javascript" src = "script/jquery.js" charset "utf- src = "script/js/outil.js" charset = "utf-8"> </script> <script charset = "utf-8" type = "text/javaScript" src = "script/jQuery/jQuery.ui.js"> </script> <link rel = "stylesheet" type "text/cs"/cs " href = "script/jQuery/Themen/UI-Lightness/jQuery.ui.css"> <script charset = "utf-8" type = "text/javaScript" src = "script/dialog/dialog.js" id = "dialog_js" type = "text/css"> <style type = "text/css"> *{margin: 0; Polsterung: 0; Text-Align: Mitte; Textdekoration: Keine; } body {font: 12px/1.5 Songyi, Tahoma, Arial, sans-serif; Schriftfamilie: "Microsoft Yahei"; Breite: 320px; Höhe: Auto; Rand: 0 Auto; } .Content {Border: #CCC Solid 1px; Rand: 60px 10px 10px; Hintergrund: #fff; Überlauf: versteckt; Farbe:#6b6b6b; Schriftgröße: 14px; Border-Radius: 5px; } </style> </head> <body> <!-Der Selektor wird von ectType = "Dialog"-> <div> <a href = "javaScript: void (0);" ausgewählt. ectType = "dialog" dialog_id = "dialog_test" dialog_title = "Dialog -Test" Dialog_width = "300" uri = "pop_son.html"> Dialog -Test </a> </div> </body> </html>>Geben Sie dann dem Selektor einen Teil des Codes an, dh den Code von Outil.js. Natürlich werde ich nicht über die vorherige JQuery und die Jquery -Benutzeroberfläche sprechen. Im Kern muss es auf Ereignisse klicken.
jQuery.extend ({getcookie: function (sname) {var acookie = document.cookie.split (";"); für (var i = 0; i <acookie.length; i ++) {var Acrumb = acookie [i] .Split ("="); }, setCookie: function (sname, sValue, sexpires) {var scookie = sname + "=" + codeuricomponent (SVALUE); läuft = Fri, 31. Dezember 1999 23:59:59 GMT; ";}}); $ (this) .Attr ('Dialog_title'): ''; = URL; }}/* AJAX Form*/function ajax_form (id, title, url, width) {if (! Width) {width = 400; } var d = dialogManager.create (id); D.Settitle (Titel); D.SetContents ('Ajax', URL); D.Setwidth (Breite); D.Show ('Center'); return d;} Funktion go (url) {window.location = url;} Funktion set_zindex (Eltern, Index) {$ .each (Eltern, Funktion (i, n) {if ($ (n) .css ('Position') == 'Relative') {// alert ('relative'); $ (n) .css ('z-Index', Index); var url = window.location.href; url = url.indexof ('#')> 0? url.replace (/#/g, ''): url; window.location.replace (url);} Funktion js_fail (str) {$ ('#warning'). html ('<label>' + str + '</label>'); $ ('#warning'). show ();} function check_pint (v) {var regu = /^[0-9] {1,} $ /; if (! regu.test (v)) {alert (lang.only_int); false zurückgeben; } return true;}/ * konvertieren & */function Transform_char (str) {if (str.Indexof ('&')) {str = str.replace (/&/g, "%26"); } return str;} // kopieren Sie in die Clipboard -Funktion copyToclipboard (txt) {if (window.clipboardData) {window.clipboardData.ClearData (); window.clipboardData.setData ("text", txt); } else if (navigator.useragent.indexof ("Opera")! = -1) {window.location = txt; } else if (window.NetScape) {try {netscape.security.privileGemanager.EnablePrivilege ("UniversalXPConnect"); } catch (e) {return false; } var clip = components.classes ['@mozilla.org/widget/clipboard;1'low.CreateInstance(components.interfaces.nsiclipboard); if (! clip) return falsch; var trans = components.classes ['@mozilla.org/widget/transferable;1'low.CreateInstance(components.Interfaces.nsitransferable); if (! trans) return falsch; trans.adddatafLavor ('text/unicode'); var str = new Object (); var len = new Object (); var str = components.classes ["@mozilla.org/supports-string;1" weibliche. var copyright = txt; Str.data = CopyText; trans.settransferData ("text/unicode", str, copyText.length*2); var clipid = components.interfaces.nsiclipboard; if (! clip) return falsch; clip.setData (trans, null, clipid.kglobalclipboard); }}Der relevante Code für die Bindung von Ereignissen ist der Kerncode des Dialogfelds (Dialog.js). Dies wurde online gefunden. Danke hier. Der Code ist wie folgt:
__Dialog_wrapper__ = {};/* Es gibt einen Fehler in IE6. Wenn die Breite des Dialogfelds nicht angegeben ist, wird das Dialogfeld mit 100% Breite in IE6*/dialogManager = {'create': function (id) {var d = {} angezeigt; if (! __ dialog_wrapper __ [id]) {d = neuer Dialog (ID); __Dialog_wrapper __ [id] = d; } else {d = dialogManager.get (id); } return d; }, 'get': function (id) {return __dialog_wrapper __ [id]; }, 'close': function (id) {if (__dialog_wrapper __ [id] .close ()) {__dialog_wrapper __ [id] = null; }}, 'onclose': function () {return true; }, /* Dialogstil laden* / 'LoadStyle': function () {var _dialog_js_path = $ ('#dialog_js'). Attr ('src'); var _path = _dialog_js_path.split ('/'); var _dialog_css = _path.slice (0, _path.length - 1) .Join ('/') + '/dialog.css'; $ ('#dialog_js'). After ('<link href = "' + _dialog_css + '" rel = "stylesheet" type = "text /css" />'); }}; ScreenLocker = {'style': {'Position': 'Absolute', 'top': '0px', 'links': '0px', 'BackgroundColor': '#000', 'Opazität': 0.5, 'Zindex': 999}, 'Masker': null, 'lock': {Zindex): this.masker.width ($ (document) .width ()). Höhe ($ (Dokument) .Height ()); zurückkehren; } this.masker = $ ('<div> </div>'); / * IE6 Hack */ if ($ .browser.msie) {$ ('select'). CSS ('Sichtbarkeit', 'versteckt'); } // var _iframe = $ ('<Iframe> </iframe>'). CSS ({'Opazität': 0, 'width': '100%', 'Höhe': '100%'}); //this.masker.append(_iframe); /* Style*/ this.masker.css (this.style); if (zindex) {this.masker.css ('Zindex', Zindex); } /* Breite und Höhe des gesamten Dokuments* / this.masker.width ($ (Dokument) .width ()). Höhe ($ (Dokument) .Height ()); $ (document.body) .Append (this.masker); }, 'entsperr': function () {if (this.masker === null) {return true; } this.masker.remove (); this.masker = null; / * IE6 Hack */ if ($ .browser.msie) {$ ('select'). CSS ('Sichtbarkeit', 'sichtbar'); }}}; Dialog = function (id) { / * Der Konstruktor generiert den Dialogcode und fügt ihn dem Dokument hinzu * / this.id = id; this.init ();}; dialog.prototype = { / * eindeutige Identifier * / 'id': null, / * dokumentobjekt * / 'dom': null, 'lastPos': null, 'status': 'complete', 'onclose': function () {return true; }, 'tmp': {}, /* initialize* / 'init': function () {this.dom = {'Wraper': null, 'body': null, 'head': null, 'title': null, 'close_button': null, 'content': null}; /* Erstellen Sie einen äußeren Container*/this.dom.wrapper = $ ('<div id = "dialog_object_' + this.id + '"> </div>'). Get (0); /* Dialogkörper erstellen*/this.dom.body = $ ('<div> </div>'). Get (0); /* Titelleiste erstellen*/this.dom.head = $ ('<H3> </h3>'). Get (0); /* Title Text erstellen*/this.dom.title = $ ('<span> </span>'). Get (0); /* Schaltfläche Schließen*///this.dom.close_button = $ ('<span> close </span>'). Get (0); /* Inhaltsbereich erstellen*/this.dom.content = $ ('<div> </div>'). Get (0); /* Inhaltsbereich erstellen*/this.dom.content = $ ('<div> </div>'). Get (0); /* Kombination*/$ (this.dom.head) .Append ('<div> </div> <div> </div>'). Append ($ ('<span> </span>'). Append (this.dom.title)). Append (this.dom.close_button); $ (this.dom.body) .Append (this.dom.head) .Append (this.dom.content); $ (this.dom.wrapper) .Append (this.dom.body) .Append ('<div style = "clear: beide; Anzeige: block;"> </div>'); /* Initialisierungsstil*/ $ (this.dom.wrapper) .css ({'zindex': 9999, 'display': 'keine', 'Position': 'Absolute'}); $ (this.dom.body) .css ({'Position': 'relative'}); $ (this.dom.head) .css ({'cursor': 'move'}); $ (this.dom.close_button) .css ({'Position': 'Absolute', 'Text-Indent': '-9999px', 'Cursor': 'Zeiger', 'Überlauf': 'Hidden'}); $ (this.dom.content) .css ({'margin': '0px', 'padding': '0px'}); var self = this; /* Komponentenereignis initialisieren*/ $ (this.dom.close_button) .click (function () {dialogManager.close (self.id);}); / * Drag and Drop */ $ (this.dom.wrapper) .Daggable ({'Handle': this.dom.head}); /* Dokumentstream eingeben*/ $ (document.body) .Append (this.dom.wrapper); }, /* Hide* / 'hide': function () {$ (this.dom.wrapper) .hide (); }, / * Show * / 'show': function (pos) {if (pos) {this.setPosition (pos); } /* Sperrbildschirm* / screenLocker.lock (999); /* Dialog anzeigen*/ $ (this.dom.wrapper) .show (); }, /* Close* / 'close': function () {if (! This.onclose ()) {return false; } /* Dialog schließen* / $ (this.dom.wrapper) .remove (); /* Bildschirm entsperren*/ screenlocker.unlock (); zurückkehren; }, /* Dialog -Titel* / 'settitle': function (title) {$ (this.dom.title) .html (title); }, /* Das Dialogfeld -Inhalt ändern* / 'setContents': Funktion (Typ, Optionen) {contents = this.createContents (Typ, Optionen); if (typeof (Inhalt) == 'String') {$ (this.dom.content) .html (Inhalt); } else {$ (this.dom.content) .Empty (); $ (this.dom.content) .Append (Inhalt); }}, /* Setzen Sie den Dialogfeldstil* / 'setStyle': function (style) {if (typeof (style) == 'Objekt') { /* Ansonsten ist es CSS* / $ (this.dom.wrapper) .css (style); } else { / * Wenn es sich um eine Zeichenfolge handelt, gilt es als der Stilname * / $ (this.dom.wrapper) .AddClass (Stil); }}, 'setwidth': function (width) {this.setStyle ({'width': width + 'px'}); }, 'setheight': function (Höhe) {this.setStyle ({'Höhe': Höhe + 'px'}); }, /* Dialoginhalt generieren* / 'createContentents': Funktion (Typ, Optionen) {var _html = '', self = this, status = 'komplett'; if (! Optionen) { / * Wenn es nur einen Parameter gibt, wird es als HTML -Zeichenfolge angesehen * / this.setStatus (Status); Rückgabetyp; } Switch (Typ) {case 'ajax': /* Holen Sie sich HTML durch Ajax und zeigen Sie es auf der Seite an. Dieser Prozess ist asynchron*/ $ .get (Optionen, {ajax: 1}, function (data) {if (data.substr (0,1) == '{' && data.substr (Data.Length - 1, 1) == '}') {var json = eval (' + data +'); Rückgabe; 'Close') {self.close (); / * Erste Aufforderung, dass es geladen wird */ _html = this.CreateContents ('Laden', {'text': 'Laden ...'}); brechen; /* Im Folgenden finden Sie einige integrierte Dialogetypen*/case 'Laden': _html = '<div> <div>' + options.text + '</div> </div>'; status = 'laden'; brechen; Fall 'Nachricht': var type = 'middle' '; if (options.type) {type = options.type; } _message_body = $ ('<div> </div>'); _message_contents = $ ('<div>' + options.text + '</div>'); _buttons_bar = $ ('<div> </div>'); Switch (Typ) {case 'Notiz': case 'WARNUNG': var button_name = Lang.Confirm; if (options.button_name) {button_name = options.button_name; } _ok_button = $ ('<input type = "button" value = "' + button_name + '" />'); $ (_ OK_Button) .click (function () {if (options.onclick) {if (! options.onclick.call ()) {return;}} DialogManager.CLOSE (self.id);}); $ (_ buttons_bar) .Append (_ok_button); brechen; Fall 'bestätigen': var yes_button_name = Lang.yes; var no_button_name = Lang.no; if (options.yes_button_name) {yes_button_name = options.yes_button_name; } if (options.no_button_name) {no_button_name = options.no_button_name; } _yes_button = $ ('<Eingabe type = "button" value = "' + yes_button_name + '" />'); _no_button = $ ('<input type = "button" value = "' + no_button_name + '" />'); $ (_ yes_button) .click (function () {if (options.onclickyes) {if (options.onclickyes.call () === false) {return;}} Dialogmanager.close (self.id);}); $ (_ no_button) .click (function () {if (options.onclickno) {if (options.onclickno) {if (! options.onclickno.call ()) {return;}} dialogmanager.close (self.id); $ (_ buttons_bar) .Append (_yes_button) .Append (_no_button); brechen; } _html = $ (_ message_body) .Append (_message_contents) .Append (_buttons_bar); brechen; } this.setStatus (Status); return _html; }, /* Position* / 'setPosition': function (pos) { /* letzte Position* / this.lastpos = pos; if (typeof (pos) == 'String') {switch (pos) {case 'center': var links = 0; var top = 0; var dialog_width = $ (this.dom.wrapper) .width (); var dialog_height = $ (this.dom.wrapper) .height (); / * links = Breite der Bildlaufleiste + (der aktuelle Ansichtsbereich - die Breite des Dialogfelds) / 2 * / links = $ (Fenster) .Scrollleft () + ($ (Fenster) .Width () - Dialog_Width) / 2; / * Top = Höhe der Bildlaufleiste + (der aktuelle Betrachtungsbereich - die Höhe des Dialogfelds) / 2 * / TOP = $ (Fenster) .Scrolltop () + ($ (Fenster) .Height () - Dialog_Height) / 2; $ (this.dom.wrapper) .css ({links: links + 'px', top: top + 'px'}); brechen; }} else {var _pos = {}; if (typeof (pos.left)! = 'undefined') {_pos.left = pos.left; } if (typeof (pos.top)! = 'undefined') {_pos.top = pos.top; } $ (this.dom.wrapper) .css (_pos); }}, /* Status set* / 'setStatus': function (code) {this.status = code; }, /* Status erhalten* / 'getStatus': function () {return this.status; }, 'DeInableClose': function (msg) {this.tmp ['OldOnclose'] = this.onclose; this.onclose = function () {if (msg) alert (msg); false zurückgeben; }; }, 'EnableClose': function () {this.onclose = this.tmp ['Oldonclose']; this.tmp ['Oldonclose'] = null; }}; // REMEBYZZY20160909: Manuell einführen Style -Datei //dialogmanager.loadstyle ();OK, das obige ist die Kernlogik und die Code -Implementierung. Der Code erläutert den gesamten Prozess gut und es besteht keine Notwendigkeit, Text zu verschwenden. Ich werde die Unterform hier veröffentlichen.
<Styles> .BTN {Margin: 10px 5px; Breite: 100px; } </style> <form method = "post" action = "{$ myAction}" id = "popupForm"> <div style = "margin-top: 10px;" > <p> Der hier angezeigte Inhalt kann ein Formular oder eine Nichtform sein. <Eingabe type = "Hidden" name = "ret_url" value = "{$ ret_url}"/> </p> <Eingabe type = "value =" complete "/> </div> </Form>Schließlich werde ich ein weiteres Rendering veröffentlichen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.