Le plan d'origine était de réaliser une telle exigence: le clic de la réception déclenche une action professionnelle, et l'utilisateur doit compléter les informations, sans sauter la page et compléter les informations sous forme de fenêtres pop-up. C'était troublé, mais il n'a pas été utilisé à la fin.
Le code est encore un peu créé et fournit une logique d'implémentation approximative.
Idée d'implémentation: posez un masque sur la fenêtre pour bloquer le bouton de fonction de fenêtre d'origine et réalisez les fenêtres contextuelles au positionnement absolu sur la couche supérieure du masque. L'interaction des données dans la fenêtre contextuelle est la méthode AJAX. Utilisez OnClick pour démarrer un événement pop-up.
Détails clés: la fenêtre contextuelle et le formulaire d'origine sont essentiellement la même page. Pour la commodité de la description, appelons le formulaire inférieur le formulaire parent et la fenêtre contextuelle du formulaire enfant. Afin d'atteindre l'interaction du formulaire parent, vous devez faire des étiquettes spéciales sous le formulaire parent afin que le sélecteur puisse sélectionner et insérer un nouvel objet DOM.
De cette façon, regardez d'abord le code du formulaire parent. J'ai des commentaires sur la partie clé.
<html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" content = "text / html; charset = utf-8"> <meta name = "Viewport" contenu = "initial-scale = 1.0, user-scalable = no"> <aaa " name = "Apple-mobile-web-app-capable" contenu = "Oui"> <meta name = "Apple-Mobile-web-App-status-Bar-Style" Content = "Black"> <Title> Test Pop-up </ Title> <Script Type = "Text / Javascrip 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 / css" href = "script / jQuery / themes / ui-lightness / jQuery.ui.css"> <script charset = "utf-8" type = "text / javascript" src = "script / dialog / dialog.js" id = "dialog_js"> </ script> <link href = "script / dialog.css" rold type = "text / css"> <style type = "text / css"> * {margin: 0; rembourrage: 0; Texte-aligne: Centre; Décoration du texte: aucune; } Body {Font: 12px / 1.5 Songyi, Tahoma, Arial, Sans-Serif; Font-Family: "Microsoft Yahei"; Largeur: 320px; Hauteur: Auto; marge: 0 auto; } .Content {border: #ccc solide 1px; marge: 60px 10px 10px; Contexte: #FFF; débordement: caché; Couleur: # 6B6B6B; taille de police: 14px; Border-Radius: 5px; } </ style> </ head> <body> <! - Le sélecteur est sélectionné par ectType = "Dialog" -> <div> <a href = "javascript: void (0);" ectType = "Dialog" Dialog_ID = "Dialog_test" Dialog_title = "Test de dialogue" Dialog_Width = "300" URI = "POP_SON.HTML"> Test de dialogue </a> </div> </ body> </html>Donnez ensuite la partie sélective du code, c'est-à-dire le code de Outil.js. Bien sûr, je ne parlerai pas de la précédente interface utilisateur de jQuery et JQuery. À la base, il est tenu de cliquer sur les événements.
jQuery.Extend ({getcookie: function (sname) {var acookie = document.cookie.split (";"); for (var i = 0; i <acookie.length; i ++) {var acrumb = acookie [i] .split ("="); if (sname == acrumb [0]) return dicoteUrcomponent (acrumb [1]); }. expires = ven, 31 décembre 1999 23:59:59 gmt; ";}}); $ (function () {/ * Dialog Sélectionner et lier un nouvel événement de clic * / $ ('* [ectype =" Dialog "]'). Cliquez (fonction () {var id = $ (this) .attr ('Dialog_id'); $ (this) .attr ('dialog_title'): ''; = url; }} / * Afficher le formulaire ajax * / fonction ajax_form (id, title, url, largeur) {if (! Width) {width = 400; } var d = dialogmanager.create (id); D.SetTitle (titre); D.SetContents («Ajax», URL); D.SetWidth (largeur); D.Show ('Centre'); return d;} function go (url) {window.location = url;} fonction set_zindex (parents, index) {$ .each (parents, fonction (i, n) {if ($ (n) .css ('position') == 'relative') {// alert ('relative'); //alert($(n). $ (n) .css ('z-index', index);}});} fonction js_success (dialog_id) {dialogmanager.close (dialog_id); var url = window.location.href; url = url.indexof ('#')> 0? url.replace (/ # / g, ''): URL; window.location.replace (URL);} fonction js_fail (str) {$ ('# avertissement'). html ('<label>' + str + '</ label>'); $ ('# avertissement'). show ();} fonction check_pint (v) {var regu = / ^ [0-9] {1,} $ /; if (! Regu.Test (v)) {alert (lang.only_int); retourne false; } return true;} / * convert & * / fonction transform_char (str) {if (str.indexof ('&')) {str = str.replace (/ & / g, "% 26"); } return str;} // Copier dans la fonction du presse-papiers CopyToClipboard (txt) {if (window.clipboardData) {window.clipboardData.Cleardata (); window.clipboarddata.setData ("texte", txt); } else if (navigator.useragent.indexof ("opéra")! = -1) {window.location = txt; } else if (window.netscape) {try {netscape.security.privilegeManager.enablePrivilege ("universalxpconnect"); } catch (e) {return false; } var clip = composants.classes ['@ mozilla.org/widget/clipboard ;1'mal.createinstance(Components.interfaces.nsiclipboard); if (! clip) return false; var trans = Components.classes ['@ mozilla.org/widget/transferable ;1' si (! trans) retourne false; trans.adddataflavor ('text / unicode'); var str = nouveau objet (); var len = new object (); var str = composants.classes ["@ mozilla.org/supports-string ;1". var copyright = txt; str.data = copyText; trans.setTransferData ("Text / Unicode", Str, CopyText.Length * 2); var clid = composants.interfaces.nsiclipboard; if (! clip) return false; clip.setData (trans, null, clid.kglobalclipboard); }}Le code pertinent pour les événements de liaison est le code de dialogue de base (Dialog.js). Cela a été trouvé en ligne. Merci ici. Le code est le suivant:
__Dialog_wrapper__ = {}; / * Il y a un bug dans IE6. Si la largeur de la boîte de dialogue n'est pas donnée, la boîte de dialogue sera affichée avec une largeur de 100% dans IE6 * / DialogManager = {'Create': function (id) {var d = {}; if (! __ Dialog_wrapper __ [id]) {d = nouvelle boîte de dialogue (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; }, / * LOAK DIALANG STYLE * / 'LOADSTYLE': fonction () {var _dialog_js_path = $ ('# dialog_js'). Att ('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': 'absolu', 'top': '0px', 'gauche': '0px', 'backgroundcolor': '# 000', 'opacity': 0.5, 'zindex': 999}, 'masker': null, 'Lock': function (zindex) {if (this.masker! = this.masker.width ($ (document) .width ()). hauteur ($ (document) .Height ()); Retour Vrai; } this.masker = $ ('<div> </div>'); / * Ie6 hack * / if ($ .browser.msie) {$ ('select'). Css ('visibilité', 'Hidden'); } // var _iframe = $ ('<iframe> </ iframe>'). CSS ({'opacité': 0, 'width': '100%', 'height': '100%'}); //this.masker.append(_iframe); / * Style * / this.masker.css (this.style); if (zindex) {this.masker.css ('zindex', zindex); } / * largeur et hauteur de l'ensemble du document * / this.masker.width ($ (document) .width ()). hauteur ($ (document) .Height ()); $ (document.body) .append (this.masker); }, 'unlock': function () {if (this.masker === null) {return true; } this.masker.remove (); this.masker = null; / * Ie6 hack * / if ($ .browser.msie) {$ ('select'). Css ('visibilité', 'visible'); }}}; Dialog = function (id) {/ * Le constructeur génère du code de dialogue et l'ajoute au document * / this.id = id; this.init ();}; dialog.prototype = {/ * identifiant unique * / 'id': null, / * objet document * / 'dom': null, 'lastpos': null, 'status': 'complet', 'onclose': function () {return true; }, 'tmp': {}, / * initialize * / 'init': function () {this.dom = {'wrapper': null, 'body': null, 'head': null, 'title': null, 'close_button': null, 'contenu': null}; / * Créer un conteneur extérieur * / this.dom.wrapper = $ ('<div id = "dialog_Object_' + this.id + '"> </div>'). Get (0); / * Créer un corps de dialogue * / this.dom.body = $ ('<div> </div>'). Get (0); / * Créer une barre de titre * / this.dom.head = $ ('<h3> </h3>'). Get (0); / * Créer du texte de titre * / this.dom.title = $ ('<span> </span>'). Get (0); / * Créer le bouton Fermer * / //this.dom.close_button = $ ('<span> close </span>'). Get (0); / * Créer une zone de contenu * / this.dom.content = $ ('<div> </div>'). Get (0); / * Créer une zone de contenu * / this.dom.content = $ ('<div> </div>'). Get (0); / * Combinaison * / $ (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) .Apnd (this.dom.body) .append ('<div style = "Clear: les deux; affichage: bloc;"> </div>'); / * Style d'initialisation * / $ (this.dom.wrapper) .css ({'zindex': 9999, 'affiche': 'Aucun', 'position': 'absolu'}); $ (this.dom.body) .css ({'position': 'relative'}); $ (this.dom.head) .css ({'cursor': 'move'}); $ (this.dom.close_button) .css ({'position': 'Absolute', 'text-indent': '-9999px', 'cursor': 'pointer', 'overflow': 'Hidden'}); $ (this.dom.content) .css ({'margin': '0px', 'padding': '0px'}); var self = this; / * Initialiser l'événement du composant * / $ (this.dom.close_button) .click (function () {dialogmanager.close (self.id);}); / * Glisser-déposer * / $ (this.dom.wrapper) .Draggable ({'manche': this.dom.head}); / * Mettre dans Document Stream * / $ (document.body) .APPEND (this.dom.wrapper); }, / * Hide * / 'masquer': function () {$ (this.dom.wrapper) .hide (); }, / * Show * / 'show': function (pos) {if (pos) {this.setPosition (pos); } / * Écran de verrouillage * / screenlocker.lock (999); / * Afficher la boîte de dialogue * / $ (this.dom.wrapper) .show (); }, / * Close * / 'close': function () {if (! This.onclose ()) {return false; } / * Fermer le dialogue * / $ (this.dom.wrapper) .Remove (); / * Déverrouiller l'écran * / screenlocker.unlock (); Retour Vrai; }, / * Titre de dialogue * / 'Setttitle': fonction (title) {$ (this.dom.title) .html (title); }, / * Modifiez le contenu de la boîte de dialogue * / 'setContents': fonction (type, options) {contenu = this.CreateContents (type, options); if (typeof (contenu) == 'String') {$ (this.dom.content) .html (contenu); } else {$ (this.dom.content) .Empty (); $ (this.dom.content) .APPEND (contenu); }}, / * Définissez la boîte de dialogue Style * / 'setStyle': fonction (style) {if (typeof (style) == 'objet') {/ * Sinon, c'est CSS * / $ (this.dom.wrapper) .css (style); } else {/ * Si c'est une chaîne, il est considéré comme le nom de style * / $ (this.dom.wrapper) .addclass (style); }}, 'setWidth': function (width) {this.setStyle ({'width': width + 'px'}); }, 'Setheight': function (height) {this.setStyle ({'height': height + 'px'}); }, / * Générer du contenu de dialogue * / 'createContents': function (type, options) {var _html = '', self = this, status = 'complet'; if (! Options) {/ * s'il n'y a qu'un seul paramètre, il est considéré comme la chaîne HTML * / this.setStatus (status); type de retour; } switch (type) {case 'ajax': / * obtenir html via ajax et l'afficher sur la page. Ce processus est asynchrone * / $ .get (Options, {ajax: 1}, fonction (data) {if (data.substr (0,1) == '{' && data.substr (data.length - 1, 1) == '}') {var json = evv. return; 'close') {self.close ();}}); / * Première invite qu'il charge * / _html = this.CreateContents ('Loading', {'Text': 'Chargement ...'}); casser; / * Voici plusieurs types de boîte de dialogue intégrés * / Case 'Chargeing': _html = '<div> <div>' + OptionS.Text + '</div> </div>'; status = 'chargement'; casser; case 'message': var type = 'note'; if (options.Type) {type = options.Type; } _Message_Body = $ ('<div> </div>'); _Message_Contents = $ ('<div>' + options.Text + '</div>'); _buttons_bar = $ ('<div> </div>'); switch (type) {case 'note': case 'avertissement': 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) .Apnd (_ok_button); casser; case 'confirm': var oui_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 = $ ('<input type = "Button" value = "' + oui_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) .Apnd (_yes_button) .append (_no_button); casser; } _html = $ (_ message_body) .append (_Message_Contents) .append (_buttons_bar); casser; } this.setStatus (statut); retour _html; }, / * Position * / 'setPosition': function (pos) {/ * dernière position * / this.lastpos = pos; if (typeof (pos) == 'string') {switch (pos) {case 'Center': var Left = 0; var top = 0; var dialog_width = $ (this.dom.wrapper) .width (); var dialog_height = $ (this.dom.wrapper) .Height (); / * Left = largeur de la barre de défilement + (la zone de visualisation actuelle - la largeur de la boîte de dialogue) / 2 * / gauche = $ (fenêtre) .scrollleft () + ($ (window) .width () - dialog_width) / 2; / * top = hauteur de la barre de scroll + (la zone de visualisation actuelle - la hauteur de la boîte de dialogue) / 2 * / top = $ (fenêtre) .scrolltop () + ($ (window) .Height () - Dialog_height) / 2; $ (this.dom.wrapper) .css ({Left: Left + 'px', top: top + 'px'}); casser; }} 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); }}, / * Set status * / 'setStatus': function (code) {this.status = code; }, / * Get status * / 'getStatus': function () {return this.status; }, 'DisableClose': function (msg) {this.tmp ['oldOnClose'] = this.OnClose; this.OnClose = function () {if (msg) alert (msg); retourne false; }; }, 'apervileclose': function () {this.onclose = this.tmp ['oldonclose']; this.tmp ['oldonclose'] = null; }}.OK, ce qui précède est la logique de base et l'implémentation du code. Le code explique bien l'intégralité du processus et il n'est pas nécessaire de gaspiller du texte. Je publierai le sous-forme ici.
<style> .btn {margin: 10px 5px; Largeur: 100px; } </ style> <form méthode = "post" action = "{$ myAction}" id = "popupform"> <div style = "margin-top: 10px;" > <p> Le contenu affiché ici peut être une forme ou une non-forme. <input type = "HIDDEN" name = "ret_url" value = "{$ ret_url}" /> </p> <input type = "soume" value = "complet" /> </div> </form>Enfin, je publierai un autre rendu.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.