O plano original era atingir esse requisito: a recepção clique em aciona uma ação comercial e o usuário precisa complementar as informações, sem pular a página e complementar as informações na forma de janelas pop-up. Estava perturbado, mas não foi usado no final.
O código ainda está um pouco crespo e fornece lógica de implementação aproximada.
Idéia de implementação: coloque uma máscara na janela para bloquear o botão de função da janela original e realizar janelas pop-up no posicionamento absoluto na camada superior da máscara. A interação de dados na janela pop-up é o método Ajax. Use OnClick para iniciar o evento pop-up.
Detalhes da chave: A janela pop-up e o formulário original são essencialmente a mesma página. Para a conveniência da descrição, vamos chamar a parte inferior do formulário pai e a janela pop-up do formulário filho. Para alcançar a interação do formulário pai, você precisa criar alguns rótulos especiais no formulário pai para que o seletor possa selecionar e inserir um novo objeto DOM.
Dessa forma, primeiro veja o código do formulário pai. Eu tenho comentários sobre a parte principal.
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <meta-name = "viewport" "" Conteúdo "" name = "Apple-Mobile-Web-Appable" content = "Sim"> <meta name = "Apple-Mobile-Web-App-Status-Bar-Bar-Bar" content = "Black"> <title> teste pop-up </title> <script type = "text/javascript" src = "script/jQuery/jQuery.js" Charer (Javascript "Src =" Script/jQuery/jQuery.js "Charer (JavScript" Src = "Script/jQuery/jQuery.JS" type = "text/javascript" src = "script/js/ousil.js" charset = "utf-8"> </script> <script charset = "utf-8" type = "text/javascript" src = "script/jQuery/jQuery.ui.js"> </script> href = "script/jQuery/temas/ui-lightness/jquery.ui.css"> <script charset = "utf-8" type = "text/javascript" src = "script/dialog/dialog.js" id = "dialog_js"> </script> <link href = "script" " type = "text/css"> <style type = "text/css"> *{margem: 0; preenchimento: 0; Alinhamento de texto: centro; Decoração de texto: Nenhum; } corpo {font: 12px/1.5 Songyi, Tahoma, Arial, Sans-Serif; Fonte-família: "Microsoft Yahei"; Largura: 320px; Altura: Auto; margem: 0 automático; } .Content {borda: #ccc sólido 1px; Margem: 60px 10px 10px; Antecedentes: #FFF; estouro: oculto; Cor:#6b6b6b; Size da fonte: 14px; Radio de fronteira: 5px; } </style> </head> <body> <!-O seletor é selecionado por ecttype = "diálogo"-> <div> <a href = "javascript: void (0);" ecttype = "dialog" dialog_id = "dialog_test" dialog_title = "teste diálogo" dialog_width = "300" uri = "pop_son.html"> teste de diálogo </a> </div> </body> </html>Em seguida, dê o seletor parte do código, ou seja, o código do outil.js. Claro, não vou falar sobre o JQuery e a JQuery da interface do jQuery anterior. Na sua essência, ele deve clicar em eventos.
jQuery.extend ({getCookie: function (sname) {var acidookie = document.cookie.split (";"); para (var i = 0; i <cookie.length; i ++) {varrumb = acrookie [i] .split ("=); if (sname ==); }, setcookie: function (SNAME, Svalue, Sexpires) {var scookie = SNAME + "=" + Encodeuricomponent (Svalue); expires = sex, 31 de dezembro de 1999 23:59:59 gmt; ";}}); $ (function () { /*diálogo Selecione e vincule um novo evento de clique* / $ ('*[ectype =" dialog_id'). $ (this) .attr ('dialog_title'): ''; = url; }}/* Mostre forma AJAX*/função ajax_form (id, título, url, largura) {if (! Width) {width = 400; } var d = dialogManager.create (id); D.Settitle (título); D.setContents ('Ajax', URL); D.SetWidth (largura); D.Show ('Centro'); retornar d;} função go (url) {window.location = url;} função set_zindex (pais, index) {$ .each (pais, função (i, n) {if ($ (n) .css ('position') == 'relativa') {// Alert ('relativa'); $ (n) .css ('z-index', index); var url = window.location.href; url = url.indexof ('#')> 0? url.replace (/#/g, ''): url; window.Location.Replace (url);} função js_fail (str) {$ ('#warning'). html ('<belt>' + str + '</label>'); $ ('#aviso'). show ();} função check_pint (v) {var regus = /^[0-9] {1,} $ /; if (! regu.test (v)) {alert (lang.only_int); retornar falso; } retornar true;}/ * convert & */function transform_char (str) {if (str.indexOf ('&')) {str = str.Replace (///g, "%26"); } return str;} // copie para a função da área de transferência 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'ation.createInstance(components.interfaces.nsiclipboard); se (! clipe) retornar falso; var trans = components.classes ['@mozilla.org/widget/transferable;1'thion.createInstance(comPonents.interfaces.nsitransferable); se (! trans) retornar false; trans.adddataflavor ('text/unicode'); var str = new Object (); var len = new Object (); var str = components.classes ["@mozilla.org/supports-string ;1" ].createInstance(components.interfaces.nsisUportsString); var de direitos autorais = txt; str.data = copyText; trans.Settransferdata ("Texto/unicode", str, copytext.length*2); var clipid = components.interfaces.nsiclipboard; se (! clipe) retornar falso; clip.setData (trans, null, clipid.kglobalclipboard); }}O código relevante para eventos de ligação é o código principal da caixa de diálogo (dialog.js). Isso foi encontrado online. Obrigado aqui. O código é o seguinte:
__Dialog_wrapper__ = {};/* Há um bug no IE6. Se a largura da caixa de diálogo não for fornecida, a caixa de diálogo será exibida com 100% de largura em IE6*/dialogManager = {'create': function (id) {var d = {}; if (! __ dialog_wrapper __ [id]) {d = nova diálogo (id); __Dialog_wrapper __ [id] = d; } else {d = dialogManager.get (id); } retornar d; }, 'get': function (id) {return __dialog_wrapper __ [id]; }, 'Close': function (id) {if (__dialog_wrapper __ [id] .close ()) {__dialog_wrapper __ [id] = null; }}, 'onclose': function () {return true; }, /* Carregar estilo de diálogo* / 'loadStyle': function () {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'). Após ('<link href = "' + _dialog_css + '" rel = "sTILELESHEET" type = "text /css" />'); }}; Screenlocker = {'style': {'position': 'absoluta', 'top': '0px', 'esquerda': '0px', 'BackgroundColor': '#000', 'opacity': 0.5, 'zindex': 999}, 'masker': null ': lock: function (zindex): 999}, »isto': null ': this.masker.width ($ (documento) .width ()). altura ($ (document) .Height ()); retornar true; } this.masker = $ ('<div> </div>'); / * Ie6 hack */ if ($ .browser.msie) {$ ('select'). Css ('visibilidade', 'oculto'); } // var _iframe = $ ('<frame> </frame>'). css ({'opacity': 0, 'width': '100%', 'altura': '100%'}); //this.masker.append(_iframe); /* Estilo*/ this.masker.css (this.style); if (zindex) {this.masker.css ('zindex', zindex); } /* largura e altura de todo o documento* / this.masker.width ($ (document) .width ()). altura ($ (document) .Height ()); $ (document.body) .append (this.masker); }, 'desbloqueio': function () {if (this.masker === null) {return true; } this.masker.remove (); this.masker = null; / * Ie6 hack */ if ($ .browser.msie) {$ ('select'). Css ('visibilidade', 'visível'); }}}; Diálogo = function (id) { / * O construtor gera código de diálogo e o adiciona ao documento * / this.id = id; this.init ();}; dialog.prototype = { / * identificador exclusivo * / 'id': null, / * objeto de documento * / 'dom': null, 'lastPos': null, 'status': 'completo', 'onclose': function () {return true; }, 'tmp': {}, /* inicialize* / 'init': function () {this.dom = {'wrapper': null, 'body': null, 'head': null, 'title': null, 'close_button': null, 'content': null}; /* Crie um contêiner externo*/this.dom.wrapper = $ ('<div id = "dialog_object_' + this.id + '"> </div>'). Get (0); /* Crie corpo de diálogo*/this.dom.body = $ ('<div> </div>'). Get (0); /* Crie a barra de título*/this.dom.head = $ ('<H3> </h3>'). Get (0); /* Crie texto do título*/this.dom.title = $ ('</span> </span>'). Get (0); /* Criar botão de fechar*///this.dom.close_button = $ ('</span> fechar </span>'). Get (0); /* Crie área de conteúdo*/this.dom.content = $ ('<div> </div>'). Get (0); /* Crie área de conteúdo*/this.dom.content = $ ('<div> </div>'). Get (0); /* Combinação*/$ (this.dom.head) .append ('<div> </div> <div> </div>'). Anexe ($ ('<span> </span>'). Append (this.dom.title)). Appender (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; display: block;"> </div>'); /* Estilo de inicialização*/ $ (this.dom.wrapper) .css ({'zindex': 9999, 'display': 'none', 'position': 'absoluta'}); $ (this.dom.body) .css ({'position': 'relativo'}); $ (this.dom.head) .css ({'cursor': 'move'}); $ (this.dom.close_button) .css ({'position': 'absoluta', 'text-indent': '-9999px', 'cursor': 'ponteiro', 'transbleir': 'oculto'}); $ (this.dom.content) .css ({'margin': '0px', 'preenchimento': '0px'}); var self = this; /* Inicialize o evento do componente*/ $ (this.dom.close_button) .click (function () {dialogManager.close (self.id);}); / * Arraste e solte */ $ (this.dom.wrapper) .draggable ({'handle': this.dom.head}); /* Coloque no fluxo de documentos*/ $ (document.body) .append (this.dom.wrapper); }, /* Hide* / 'hide': function () {$ (this.dom.wrapper) .hide (); }, / * Show * / 'show': function (pos) {if (pos) {this.setPosition (pos); } /* Tela de bloqueio* / screenlocker.lock (999); /* Mostrar diálogo*/ $ (this.dom.wrapper) .show (); }, /* Close* / 'Close': function () {if (! This.onclose ()) {return false; } /* Fechar diálogo* / $ (this.dom.wrapper) .remove (); /* Tela de desbloqueio*/ screenlocker.unlock (); retornar true; }, /* Título da caixa de diálogo* / 'Settitle': function (title) {$ (this.dom.title) .html (title); }, /* Altere o conteúdo da caixa de diálogo* / 'SetContents': function (type, options) {contents = this.createContents (tipo, opções); if (typeof (contents) == 'string') {$ (this.dom.content) .html (conteúdo); } else {$ (this.dom.content) .Empty (); $ (this.dom.content) .append (conteúdo); }}, /* Defina o estilo da caixa de diálogo* / 'SetStyle': function (style) {if (typeof (style) == 'object') { /*, caso contrário, é css* / $ (this.dom.wrapper) .css (style); } else { / * Se for uma string, é considerado o nome do estilo * / $ (this.dom.wrapper) .addclass (estilo); }}, 'setWidth': function (width) {this.setStyle ({'width': width + 'px'}); }, 'SethEight': function (altura) {this.setStyle ({'altura': altura + 'px'}); }, /* Gere conteúdo de diálogo* / 'createContents': function (type, options) {var _html = '', self = this, status = 'complete'; if (! Opções) { / * Se houver apenas um parâmetro, ele é considerado o html string * / this.setStatus (status); tipo de retorno; } switch (tipo) {case 'ajax': /* Obtenha html através do Ajax e exiba -o na página. Este processo é assíncrono*/ $ .get (opções, {ajax: 1}, function (data) {if (data.substr (0,1) == '{' && data.substr (data.length - 1, 1) == '}') {var json = Eval ('(' + Data ')'); Retorno; 'Fechar') {self.close (); / * Primeiro solicite que está carregando */ _html = this.createContents ('carregando', {'text': 'carregando ...'}); quebrar; /* A seguir, são apresentados vários tipos de diálogo interno*/case 'carregamento': _html = '<div> <div>' + options.text + '</div> </div>'; status = 'carregamento'; quebrar; case 'mensagem': var tipo = 'aviso'; if (options.type) {type = options.type; } _message_body = $ ('<div> </div>'); _message_contents = $ ('<div>' + options.text + '</div>'); _buttons_bar = $ ('<div> </div>'); switch (tipo) {case 'aviso': case 'aviso': 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); quebrar; case 'confirm': 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);}); $ (_ butts_bar) .append (_yes_button) .append (_no_button); quebrar; } _html = $ (_ message_body) .append (_message_contents) .append (_buttons_bar); quebrar; } this.setStatus (status); retornar _html; }, /* Position* / 'setPosition': function (pos) { /* última posição* / this.lastpos = pos; if (typeof (pos) == 'string') {switch (pos) {case 'Center': var esquerd = 0; var top = 0; var dialog_width = $ (this.dom.wrapper) .width (); var dialog_height = $ (this.dom.wrapper) .Height (); / * esquerda = largura da barra de rolagem + (a área de visualização atual - a largura da caixa de diálogo) / 2 * / esquerda = $ (janela) .ScrollLeft () + ($ (Window) .Width () - dialog_width) / 2; / * top = altura da barra de rolagem + (a área de visualização atual - a altura da caixa de diálogo) / 2 * / top = $ (janela) .Scrolltop () + ($ (window) .Height () - dialog_Height) / 2; $ (this.dom.wrapper) .css ({esquerda: esquerda + 'px', top: top + 'px'}); quebrar; }} else {var _pos = {}; if (typeof (pos.left)! = 'indefinido') {_pos.left = pos.left; } if (typeof (pos.top)! = 'indefinido') {_pos.top = pos.top; } $ (this.dom.wrapper) .css (_pos); }}, /* Defina o status* / 'setStatus': function (code) {this.status = code; }, /* Get Status* / 'getStatus': function () {return this.status; }, 'desableClose': function (msg) {this.tmp ['OldOncLose'] = this.onclose; this.onclose = function () {if (msg) alert (msg); retornar falso; }; }, 'enableClose': function () {this.onclose = this.tmp ['OldOncLose']; this.tmp ['OldOnclose'] = null; }}; // removebyzzy20160909: introduza manualmente o arquivo de estilo //dialogManager.loadstyle ();Ok, o acima é a lógica principal e a implementação do código. O código explica bem todo o processo e não há necessidade de desperdiçar texto. Vou postar a sub-forma aqui.
<estilo> .btn {margem: 10px 5px; Largura: 100px; } </style> <form method = "post" action = "{$ myaction}" id = "popupform"> <div style = "margin-top: 10px;" > <p> O conteúdo exibido aqui pode ser um formulário ou não-forma. <input type = "hidden" name = "ret_url" value = "{$ ret_url}"/> </p> <input type = "submit" value = "complete"/> </div> </morm>Finalmente, vou postar outra representação.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.