El plan original era lograr tal requisito: el clic de recepción desencadena una acción comercial, y el usuario necesita complementar la información, sin saltar la página y complementar la información en forma de ventanas emergentes. Estaba preocupado, pero no se usó al final.
El código todavía está un poco rizado y proporciona una lógica de implementación aproximada.
Idea de implementación: coloque una máscara en la ventana para bloquear el botón original de la función de la ventana y realice ventanas emergentes en el posicionamiento absoluto en la capa superior de la máscara. La interacción de datos en la ventana emergente es el método AJAX. Use OnClick para comenzar el evento emergente.
Detalles clave: la ventana emergente y el formulario original son esencialmente la misma página. Para la comodidad de la descripción, llamemos a la forma inferior de la forma principal y la ventana emergente la forma del niño. Para lograr la interacción de la forma principal, debe hacer algunas etiquetas especiales en la forma principal para que el selector pueda seleccionar e insertar un nuevo objeto DOM.
De esta manera, primero mire el código de la forma principal. Tengo comentarios sobre la parte clave.
<html xmlns = "http://www.w3.org/1999/xhtml"> <toad> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <meta name = "visual" contenido = "scale inicial = 1.0, usado de usuario = no" name = "Apple-Mobile-Web-App-Capable" Content = "YES"> <Meta name = "Apple-Mobile-Web-App-status-Bar-Style" Content = "Black"> <title> Test Pop-up </title> <script type = "text/javaScript" src = "script/jQuery/jQuery.js" charset = "utf-8"> </script> <script> <script> <script> "script/" text/"text/" javaScript " 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" relat = " type = "text/css"> <style type = "text/css"> *{margen: 0; relleno: 0; Text-Align: Center; Decoración de texto: ninguna; } Body {Font: 12px/1.5 Songyi, Tahoma, Arial, Sans-Serif; Font-Family: "Microsoft Yahei"; Ancho: 320px; Altura: Auto; margen: 0 auto; } .content {border: #ccc solid 1px; margen: 60px 10px 10px; Antecedentes: #fff; desbordamiento: oculto; Color:#6b6b6b; tamaño de fuente: 14px; Border-Radius: 5px; } </style> </head> <body> <!-El selector es seleccionado por ecttype = "diálogo"-> <div> <a href = "javascript: void (0);" ecttype = "dialog" dialog_id = "dialog_test" dialog_title = "Test de diálogo" dialog_width = "300" uri = "pop_son.html"> Test de diálogo </a> </div> </body> </html>Luego, dé la parte del selector del código, es decir, el código de outil.js. Por supuesto, no hablaré sobre la JQuery y JQuery UI anterior. En esencia, está obligado a hacer clic en eventos.
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 decodeuricomponent (acrookie [1. }, setcookie: function (sname, svalue, sexpires) {var scookie = sname + "=" + codeuricponent (svalue); expires = fri, 31 de diciembre de 1999 23:59:59 gmt; ";}}); $ (function () { /*dialog seleccione y vincule un nuevo evento de clic* / $ ('*[ectype =" diálogo "]'). Click (function () {var id = $ (this) .attr ('dialoG_id'); var title = $ (this) .attr (dialtt ('dialoGtle')? $ (this) .attr ('dialog_title'): ''; = url; }}/* Show ajax form*/function ajax_form (id, título, url, ancho) {if (! Width) {width = 400; } var d = dialogManager.create (id); d.settitle (título); d.setContents ('Ajax', URL); d.SetWidth (ancho); D.show ('Centro'); return d;} function go (url) {window.location = url;} function set_zindex (padres, index) {$ .each (padres, function (i, n) {if ($ (n) .css ('position') == 'relativo') {// alerta ('relativo'); //alert($(n).css('z-index '); $ (n) .css ('Z-Index', index); var url = window.location.href; url = url.indexof ('#')> 0? url.replace (/#/g, ''): url; window.location.replace (url);} function js_fail (str) {$ ('#advertencia'). html ('<label>' + str + '</label>'); $ ('#advertencia'). show ();} function check_pint (v) {var regu = /^[0-9] {1,} $ /; if (! regu.test (v)) {alert (lang.only_int); devolver falso; } return true;}/ * convert & */function transform_char (str) {if (str.indexof ('&')) {str = str.replace (/&/g, "%26"); } return str;} // Copiar a la función de portapapeles copyToclipboard (txt) {if (window.clipboardData) {window.clipboarddata.cLearData (); Window.ClipboardData.SetData ("Text", txt); } else if (navigator.useragent.indexof ("ópera")! = -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'font>.createInstance(Components.interfaces.nsiclipboard); if (! clip) return false; var trans = components.classes ['@mozilla.org/widget/transferible;1'font>.createInstance(Components.Interfaces.nsitransferable); if (! trans) return false; trans.adddataflavor ('text/unicode'); var str = new Object (); var len = new Object (); var str = components.classes ["@mozilla.org/supports-string;1"font>.createInstance(Components.Interfaces.nsisupportsString); var copyright = txt; str.data = copyText; trans.setTransferdata ("Text/Unicode", Str, CopyText.Length*2); var clipid = componentes.interfaces.nsiclipboard; if (! clip) return false; clip.setData (trans, null, clipid.kglobalclipboard); }}El código relevante para eventos vinculantes es el código central de diálogo (Dialog.js). Esto fue encontrado en línea. Gracias aquí. El código es el siguiente:
__Dialog_wrapper__ = {};/* Hay un error en IE6. Si no se da el ancho del cuadro de diálogo, el cuadro de diálogo se mostrará con 100% de ancho en IE6*/dialogManager = {'create': function (id) {var d = {}; if (! __ dialog_wrapper __ [id]) {d = new Dialog (id); __Dialog_wrapper __ [id] = d; } else {d = dialogManager.get (id); } retorno d; }, 'get': function (id) {return __dialog_wrapper __ [id]; }, 'cerrar': function (id) {if (__dialog_wrapper __ [id] .close ()) {__dialog_wrapper __ [id] = null; }}, 'onClose': function () {return true; }, /* Cargar estilo de diálogo* / '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', 'Left': '0px', 'BackgroundColor': '#000', 'Opacidad': 0.5, 'Zindex': 999}, 'Masker': Null, 'Lock': function (Zindex) {if (este. Master) this.masker.width ($ (documento) .Width ()). Altura ($ (documento) .Height ()); devolver verdadero; } this.masker = $ ('<div> </div>'); / * Ie6 hack */ if ($ .browser.msie) {$ ('select'). CSS ('Visibilidad', 'Hidden'); } // var _iframe = $ ('<iframe> </iframe>'). CSS ({'opacidad': 0, 'ancho': '100%', 'altura': '100%'}); //this.masker.append(_iframe); /* Estilo*/ this.masker.css (this.style); if (zindex) {this.masker.css ('zindex', zindex); } /* ancho y altura de todo el documento* / this.masker.width ($ (documento) .Width ()). Altura ($ (documento) .Height ()); $ (document.body) .append (this.masker); }, 'desbloquear': function () {if (this.masker === null) {return true; } this.masker.remove (); this.masker = null; / * Ie6 hack */ if ($ .browser.msie) {$ ('select'). Css ('visibilidad', 'visible'); }}}; Diálogo = function (id) { / * El constructor genera código de diálogo y lo agrega al documento * / this.id = id; this.init ();}; dialog.prototype = { / * un único identificador * / 'id': null, / * objeto de documento * / 'dom': null, 'lastPos': null, 'status': 'completa', 'onClose': function () {return true; }, 'tmp': {}, /* inicialize* / 'init': functer () {this.dom = {'wrapper': null, 'body': null, 'head': null, 'title': null, 'close_button': null, 'content': null}; /* Crear un contenedor externo*/this.dom.wrapper = $ ('<div id = "dialog_object_' + this.id + '"> </div>'). Get (0); /* Crear cuerpo de diálogo*/this.dom.body = $ ('<div> </div>'). Get (0); /* Crear barra de título*/this.dom.head = $ ('<h3> </h3>'). Get (0); /* Crear texto de título*/this.dom.title = $ ('<span> </span>'). Get (0); /* Crear botón Cerrar*///this.dom.close_button = $ ('<span> Close </span>'). Get (0); /* Crear área de contenido*/this.dom.content = $ ('<div> </div>'). Get (0); /* Crear área de contenido*/this.dom.content = $ ('<div> </div>'). Get (0); /* Combinación*/$ (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 = "claro: ambos; pantalla: block;"> </div>'); /* Estilo de inicialización*/ $ (this.dom.wrapper) .css ({'zindex': 9999, 'display': 'none', 'posicion': 'absoluto'}); $ (this.dom.body) .css ({'posición': 'relativo'}); $ (this.dom.head) .css ({'cursor': 'mover'}); $ (this.dom.close_button) .css ({'posición': 'absoluto', 'text-indent': '-9999px', 'cursor': 'pointer', 'desbordamiento': 'oculto'}); $ (this.dom.content) .css ({'margen': '0px', 'relleno': '0px'}); var self = this; /* Inicializar el evento del componente*/ $ (this.dom.close_button) .Click (function () {dialogManager.close (self.id);}); / * Arrastrar y soltar */ $ (this.dom.wrapper) .draggable ({'handle': this.dom.head}); /* Poner en la transmisión de documentos*/ $ (document.body) .append (this.dom.wrapper); }, /* Hide* / 'hide': function () {$ (this.dom.wrapper) .Hide (); }, / * Show * / 'show': function (pos) {if (pos) {this.setPosition (pos); } /* Pantalla de bloqueo* / ScreenLocker.lock (999); /* Mostrar diálogo*/ $ (this.dom.wrapper) .show (); }, /* Cerrar* / 'cerrar': function () {if (! This.onclose ()) {return false; } /* Cerrar diálogo* / $ (this.dom.wrapper) .remove (); /* Desbloquear pantalla*/ scseateLocker.unlock (); devolver verdadero; }, /* Título del diálogo* / 'settitle': function (title) {$ (this.dom.title) .html (title); }, /* Cambiar el contenido del cuadro de diálogo* / 'setContents': function (type, options) {contents = this.createContents (type, opciones); if (typeof (contenido) == 'string') {$ (this.dom.content) .html (contenido); } else {$ (this.dom.content) .empty (); $ (this.dom.content) .append (contenido); }}, /* Establezca el estilo del cuadro de diálogo* / 'setstyle': function (style) {if (typeOf (style) == 'object') { /* de lo contrario es CSS* / $ (this.dom.wrapper) .css (style); } else { / * Si es una cadena, se considera el nombre de estilo * / $ (this.dom.wrapper) .addclass (estilo); }}, 'setwidth': function (width) {this.setStyle ({'width': width + 'px'}); }, 'setheight': function (altura) {this.setStyle ({'altura': altura + 'px'}); }, /* Generar contenido de diálogo* / 'createContents': function (type, options) {var _html = '', self = this, status = 'completo'; if (! Opciones) { / * Si solo hay un parámetro, se considera que es la cadena html * / this.setStatus (status); tipo de retorno; } switch (type) {case 'ajax': /* Obtener html a través de AJAX y mostrarlo en la página. Este proceso es asíncrono*/ $ .get (opciones, {ajax: 1}, function (data) {if (data.substr (0,1) == '{' && data.substr (data.length - 1, 1) == '}') {var json = eval ('(' + data + '') '); if (! Json.done) return; 'Close') {self.close (); / * Primero me indica que se está cargando */ _html = this.createContents ('cargar', {'text': 'cargando ...'}); romper; /* Los siguientes son varios tipos de diálogo incorporados*/Case 'Carging': _html = '<div> <div>' + options.text + '</div> </div>'; status = 'Carga'; romper; caso 'Mensaje': var tipo = 'aviso'; if (options.type) {type = options.type; } _message_body = $ ('<div> </div>'); _message_contents = $ ('<div>' + options.text + '</div>'); _buttons_bar = $ ('<div> </div>'); switch (type) {case 'aviso': caso 'advertencia': 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);}); $ (_ BOTONS_BAR) .Append (_OK_BUTTON); romper; Caso 'Confirmar': 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 = $ ('<input 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); romper; } _html = $ (_ Message_body) .Append (_Message_Contents) .Append (_buttons_bar); romper; } this.setStatus (status); return _html; }, /* Posición* / 'setPosition': function (pos) { /* última posición* / this.lastpos = pos; if (typeof (pos) == 'string') {switch (pos) {case 'centro': var izquierda = 0; var top = 0; var dialog_width = $ (this.dom.wrapper) .width (); var dialog_height = $ (this.dom.wrapper) .Height (); / * izquierda = ancho de la barra de desplazamiento + (el área de visualización actual - el ancho del cuadro de diálogo) / 2 * / izquierda = $ (ventana) .scrollleft () + ($ (ventana) .width () - diálogo_width) / 2; / * top = altura de la barra de desplazamiento + (el área de visualización actual - la altura del cuadro de diálogo) / 2 * / top = $ (ventana) .scrolltop () + ($ (ventana) .Height () - diálogo_height) / 2; $ (this.dom.wrapper) .css ({izquierda: izquierda + 'px', top: top + 'px'}); romper; }} 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 (código) {this.status = code; }, /* Get status* / 'getStatus': function () {return this.status; }, 'discaplecLose': function (msg) {this.tmp ['oldOnclose'] = this.onclose; this.OnClose = function () {if (msg) alerta (msg); devolver falso; }; }, 'EnableClose': function () {this.OnClose = this.tmp ['oldOnclose']; this.tmp ['oldOnclose'] = null; }}; // removeByzzy20160909: introducir manualmente el archivo de estilo //dialogmanager.loadstyle ();Ok, lo anterior es la lógica central y la implementación del código. El código explica bien todo el proceso, y no hay necesidad de desperdiciar texto. Publicaré la submarina aquí.
<syle> .btn {margin: 10px 5px; Ancho: 100px; } </style> <form de método = "post" action = "{$ myAction}" id = "popupform"> <div style = "margin-top: 10px;" > <p> El contenido que se muestra aquí puede ser un formulario o una no formación. <input type = "Hidden" name = "ret_url" value = "{$ ret_url}"/> </p> <input type = "subt" value = "completo"/> </div> </form>Finalmente, publicaré otra representación.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.