Rencana asli adalah untuk mencapai persyaratan seperti itu: klik meja depan memicu tindakan bisnis, dan pengguna perlu melengkapi informasi, tanpa melompati halaman, dan melengkapi informasi dalam bentuk jendela pop-up. Itu bermasalah, tetapi pada akhirnya tidak digunakan.
Kode ini masih sedikit keriting dan memberikan logika implementasi yang kasar.
Gagasan Implementasi: Letakkan topeng di jendela untuk memblokir tombol fungsi jendela asli, dan sadari jendela pop-up pada posisi absolut di lapisan atas topeng. Interaksi data di jendela pop-up adalah metode AJAX. Gunakan OnClick untuk memulai acara pop-up.
Detail utama: Jendela pop-up dan bentuk aslinya pada dasarnya adalah halaman yang sama. Untuk kenyamanan deskripsi, mari kita panggil bentuk bawah bentuk induk dan jendela pop-up bentuk anak. Untuk mencapai interaksi bentuk induk, Anda perlu membuat beberapa label khusus dalam bentuk induk sehingga pemilih dapat memilih dan memasukkan objek DOM baru.
Dengan cara ini, pertama -tama lihat kode bentuk induk. Saya memiliki komentar di bagian penting.
<html xmlns = "http://www.w3.org/1999/xhtml"> <adept> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <meta name = "viewport" content = "-scale-scale = noer = noer =" noe "no nama =" no-scale = "no-s-scale =" no. "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 type="text/javascript" src = "script/js/outil.js" charset = "utf-8"> </script> <skrip charset = "utf-8" type = "text/javascript" src = "script/jQuery/jQuery.ui.js"> </script> <tautan rel = "stylesheet" type = "css" css " href = "skrip/jQuery/tema/ui-lampu/jQuery.ui.css"> <skrip charset = "utf-8" type = "text/javascript" src = "skrip/dialog/dialog.js" id = "dialog_js"> </script> <tautan href = "script/dialog". type = "text/css"> <style type = "text/css"> *{margin: 0; Padding: 0; Teks-Align: tengah; Dekorasi Teks: Tidak Ada; } body {font: 12px/1.5 Songyi, Tahoma, Arial, sans-serif; Font-Family: "Microsoft Yahei"; Lebar: 320px; Tinggi: otomatis; margin: 0 otomatis; } .content {border: #ccc solid 1px; margin: 60px 10px 10px; Latar belakang: #FFF; meluap: tersembunyi; Warna:#6B6B6B; Ukuran font: 14px; Border-Radius: 5px; } </tyle> </head> <body> <!-Pemilih dipilih oleh ectType = "dialog"-> <v> <a href = "javascript: void (0);" ectType = "dialog" dialog_id = "dialog_test" dialog_title = "tes dialog" dialog_width = "300" uri = "pop_son.html"> tes dialog </a> </div> </body> </html>Kemudian berikan bagian pemilih dari kode, yaitu, kode outil.js. Tentu saja, saya tidak akan berbicara tentang jQuery dan jQuery UI sebelumnya. Pada intinya, ia pasti akan mengklik peristiwa.
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]) (i]. }, setCookie: Fungsi (Sname, SValue, Sexpires) {var scookie = sname + "=" + encodeuricomponent (sValue); expires=Fri, 31 Dec 1999 23:59:59 GMT;"; }});$(function(){ /* dialog Select and bind a new click event*/ $('*[ectype="dialog"]').click(function(){ var id = $(this).attr('dialog_id'); var title = $(this).attr('dialog_title') ? $ ini) .attr (dialog_title '):' '; = url; }}/* Tunjukkan formulir Ajax*/fungsi ajax_form (id, judul, url, lebar) {if (! Width) {width = 400; } var d = dialogManager.create (id); D.Settitle (judul); D.SetContents ('Ajax', URL); d.setWidth (lebar); D.Show ('Center'); return d;} function go (url) {window.location = url;} function set_zindex (orang tua, indeks) {$ .each (orang tua, fungsi (i, n) {if ($ (n) .csss ('position') == 'relatif') {// alert ('relatif'); ///alert '). $ (n) .css ('z-index', index); var url = window.location.href; url = url.indexof ('#')> 0? url.replace (/#/g, ''): url; window.location.replace (url);} fungsi js_fail (str) {$ ('#peringatan'). html ('<label>' + str + '</label>'); $ ('#peringatan'). show ();} function check_pint (v) {var regu = /^[0-9] {1,} $ /; if (! Regu.test (v)) {alert (lang.only_int); mengembalikan false; } return true;}/ * convert & */function transform_char (str) {if (str.indexof ('&')) {str = str.replace (/&/g, "%26"); } return str;} // salin ke fungsi clipboard copyToClipboard (txt) {if (window.clipboarddata) {window.clipboarddata.clearData (); window.clipboarddata.setData ("text", txt); } lain jika (navigator.useragent.indexof ("opera")! = -1) {window.location = txt; } else if (window.netscape) {coba {netscape.security.privilegemanager.enablePrivilege ("universalxpconnect"); } catch (e) {return false; } var clip = components.classes ['@mozilla.org/widget/clipboard;1' versie.createInstance(components.interfaces.nsiclipboard); if (! clip) return false; var trans = components.classes ['@mozilla.org/widget/transferable;1' versie.createInstance(components.interfaces.nsitransferable); if (! trans) return false; trans.adddataflavor ('Text/Unicode'); var str = objek baru (); var len = objek baru (); var str = components.classes ["@mozilla.org/supports-string;1"$.createInstance(components.interfaces.nsupupportsString); var hak cipta = txt; str.data = copyText; trans.setTransferData ("Text/Unicode", str, copyText.length*2); var clipid = components.interfaces.nsiclipboard; if (! clip) return false; clip.setData (trans, null, clipid.kglobalclipboard); }}Kode yang relevan untuk acara yang mengikat adalah kode inti dialog (dialog.js). Ini ditemukan online. Terima kasih di sini. Kodenya adalah sebagai berikut:
__Dialog_wrapper__ = {};/* Ada bug di IE6. Jika lebar kotak dialog tidak diberikan, kotak dialog akan ditampilkan dengan lebar 100% di IE6*/dialogManager = {'create': function (id) {var d = {}; if (! __ dialog_wrapper __ [id]) {d = dialog baru (id); __Dialog_wrapper __ [id] = d; } else {d = dialogManager.get (id); } return d; }, 'get': function (id) {return __dialog_wrapper __ [id]; }, 'tutup': function (id) {if (__dialog_wrapper __ [id] .close ()) {__dialog_wrapper __ [id] = null; }}, 'onclose': function () {return true; }, /* Muat gaya dialog* / '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'). Setelah ('<link href = "' + _dialog_css + '" rel = "stylesheet" type = "text /css" />'); }}; Screenlocker = {'style': {'position': 'absolute', 'top': '0px', 'left': '0px', 'backgroundColor': '#000', 'opacity': 0.5) {iFe (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol (nol. this.masker.width ($ (dokumen) .width ()). tinggi ($ (dokumen) .height ()); Kembali Benar; } this.masker = $ ('<div> </div>'); / * IE6 Hack */ if ($ .browser.msie) {$ ('pilih'). CSS ('visibilitas', 'tersembunyi'); } // var _iframe = $ ('<Frame> </iframe>'). CSS ({'opacity': 0, 'width': '100%', 'tinggi': '100%'}); //this.masker.append(_iframe); /* Style*/ this.masker.css (this.style); if (zindex) {this.masker.css ('zindex', zindex); } /* Lebar dan tinggi dari seluruh dokumen* / this.masker.width ($ (dokumen) .width ()). tinggi ($ (dokumen) .height ()); $ (document.body) .PaPend (this.masker); }, 'buka kunci': function () {if (this.masker === null) {return true; } this.masker.remove (); this.masker = null; / * IE6 Hack */ if ($ .browser.msie) {$ ('pilih'). CSS ('visibilitas', 'visible'); }}}; Dialog = fungsi (id) { / * Konstruktor menghasilkan kode dialog dan menambahkannya ke dokumen * / this.id = id; this.init ();}; dialog.prototype = { / * Identifier unik * / 'id': null, / * Objek dokumen * / 'dom': null, 'lastpos': null, 'status': 'complete', 'onclose': function () {return true, 'status': 'complete', 'onclose': function () {return true; }, 'tmp': {}, /* inisialisasi* / 'init': function () {this.dom = {'wrapper': null, 'body': null, 'head': null, 'title': null, 'close_button': null, 'konten': null}; /* Buat wadah luar*/this.dom.wrapper = $ ('<div id = "dialog_object_' + this.id + '"> </div>'). Get (0); /* Buat Tubuh Dialog*/this.dom.body = $ ('<div> </div>'). Get (0); /* Buat judul bilah*/this.dom.head = $ ('<h3> </h3>'). Get (0); /* Buat Teks Judul*/this.dom.title = $ ('<span> </span>'). Get (0); /* Buat tombol tutup*///this.dom.close_button = $ ('<span> tutup </span>'). Get (0); /* Buat area konten*/this.dom.content = $ ('<div> </div>'). Get (0); /* Buat area konten*/this.dom.content = $ ('<div> </div>'). Get (0); /* Kombinasi*/$ (this.dom.head) .append ('<viv> </div> <ver> </div>'). Append ($ ('<span> </span>'). Tambahkan (this.dom.title)). Append (this.dom.close_button); $ (this.dom.body) .append (this.dom.head) .papend (this.dom.content); $ (this.dom.wrapper) .Append (this.dom.body) .append ('<div style = "clear: keduanya; tampilan: blok;"> </div>'); /* Gaya inisialisasi*/ $ (this.dom.wrapper) .css ({'zindex': 9999, 'display': 'none', 'position': 'absolute'}); $ (this.dom.body) .css ({'position': 'Relative'}); $ (this.dom.head) .css ({'kursor': 'move'}); $ (this.dom.close_button) .css ({'position': 'absolute', 'text-indent': '-9999px', 'kursor': 'pointer', 'overflow': 'tersembunyi'}); $ (this.dom.content) .css ({'margin': '0px', 'padding': '0px'}); var self = ini; /* Menginisialisasi acara komponen*/ $ (this.dom.close_button) .click (function () {dialogManager.close (self.id);}); / * Seret dan lepas */ $ (this.dom.wrapper) .draggable ({'handle': this.dom.head}); /* Masukkan aliran dokumen*/ $ (document.body). Lampai (this.dom.wrapper); }, /* Sembunyikan* / 'sembunyikan': function () {$ (this.dom.wrapper) .hide (); }, / * Show * / 'show': function (pos) {if (pos) {this.setPosition (pos); } /* Layar kunci* / screenlocker.lock (999); /* Tampilkan dialog*/ $ (this.dom.wrapper) .show (); }, /* Tutup* / 'tutup': function () {if (! This.onclose ()) {return false; } /* Tutup dialog* / $ (this.dom.wrapper) .remove (); /* Buka kunci layar*/ screenlocker.unlock (); Kembali Benar; }, /* Judul dialog* / 'settitle': function (title) {$ (this.dom.title) .html (title); }, /* Ubah konten kotak dialog* / 'setContents': function (type, options) {contents = this.createContents (type, options); if (typeOf (konten) == 'string') {$ (this.dom.content) .html (konten); } else {$ (this.dom.content) .empty (); $ (this.dom.content) .Append (konten); }}, /* Setel gaya kotak dialog* / 'setStyle': function (style) {if (typeof (style) == 'objek') { /* jika tidak css* / $ (this.dom.wrapper) .css (style); } else { / * Jika itu string, itu dianggap sebagai nama gaya * / $ (this.dom.wrapper) .addclass (style); }}, 'setWidth': function (width) {this.setStyle ({'width': width + 'px'}); }, 'setHeight': function (height) {this.setStyle ({'height': height + 'px'}); }, /* Hasilkan konten dialog* / 'createContents': function (type, options) {var _html = '', self = this, status = 'complete'; if (! Options) { / * Jika hanya ada satu parameter, itu dianggap sebagai string html * / this.setStatus (status); tipe pengembalian; } switch (type) {case 'AJAX': /* Dapatkan html melalui Ajax dan menampilkannya di halaman. Proses ini asynchronous*/ $ .get (opsi, {ajax: 1}, function (data) {if (data.substr (0,1) == '{' && Data.substr (data.length - 1, 1) == '}') {var json = eval ('(' (' + data +'); pengembalian;}} self.setcontents (data); 'tutup') {self.close (); / * Prompt pertama yang memuat */ _html = this.createContents ('memuat', {'teks': 'memuat ...'}); merusak; /* Berikut ini adalah beberapa tipe dialog bawaan*/case 'memuat': _html = '<div> <div>' + options.Text + '</div> </div>'; status = 'memuat'; merusak; case 'pesan': 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 'warning': var button_name = lang.confirm; if (options.button_name) {button_name = options.button_name; } _ok_button = $ ('<input type = "Tombol" value = "' + button_name + '" />'); $ (_ ok_button) .click (function () {if (options.onClick) {if (! options.onClick.call ()) {return;}} dialogManager.close (self.id);}); $ (_ tombol_bar) .Append (_ok_button); merusak; kasus 'konfirmasi': 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 = "tombol" value = "' + yes_button_name + '" />'); _no_button = $ ('<input type = "tombol" 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);}); $ (_ tombol_bar) .Append (_yes_button) .Append (_no_button); merusak; } _html = $ (_ message_body) .Append (_message_contents) .Append (_buttons_bar); merusak; } this.setStatus (status); return _html; }, /* Posisi* / 'setPosisi': function (pos) { /* posisi terakhir* / 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 (); / * kiri = lebar scrollbar + (area tampilan saat ini - lebar kotak dialog) / 2 * / kiri = $ (jendela) .scrollleft () + ($ (window) .width () - dialog_width) / 2; / * atas = tinggi scrollbar + (area tampilan saat ini - tinggi kotak dialog) / 2 * / top = $ (window) .scrolltop () + ($ (window) .height () - dialog_height) / 2; $ (this.dom.wrapper) .css ({left: left + 'px', top: top + 'px'}); merusak; }} else {var _pos = {}; if (typeof (pos.left)! = 'tidak terdefinisi') {_pos.left = pos.left; } if (typeof (pos.top)! = 'tidak terdefinisi') {_pos.top = pos.top; } $ (this.dom.wrapper) .css (_pos); }}, /* Set status* / 'setstatus': function (kode) {this.status = kode; }, /* Dapatkan status* / 'getstatus': function () {return this.status; }, 'disableClose': function (msg) {this.tmp ['oldonclose'] = this.onclose; this.onclose = function () {if (msg) alert (msg); mengembalikan false; }; }, 'enableClose': function () {this.onclose = this.tmp ['oldonclose']; this.tmp ['oldonclose'] = null; }}; // RemoveByzzy20160909: secara manual memperkenalkan file gaya //dialogmanager.loadstyle ();OK, di atas adalah logika inti dan implementasi kode. Kode menjelaskan seluruh proses dengan baik, dan tidak perlu membuang teks. Saya akan memposting sub-bentuk di sini.
<tyle> .btn {margin: 10px 5px; Lebar: 100px; } </tyle> <form method = "POST" ACTION = "{$ myAction}" id = "popupform"> <div style = "margin-top: 10px;" > <p> Konten yang ditampilkan di sini dapat berupa formulir atau non-bentuk. <input type = "hidden" name = "ret_url" value = "{$ ret_url}"/> </p> <input type = "kirim" value = "complete"/> </div> </form>Akhirnya, saya akan memposting rendering lain.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.