แผนเดิมคือการบรรลุข้อกำหนดดังกล่าว: การคลิกแผนกต้อนรับส่วนหน้าทำให้เกิดการดำเนินการทางธุรกิจและผู้ใช้จำเป็นต้องเสริมข้อมูลโดยไม่ต้องกระโดดหน้าและข้อมูลเสริมในรูปแบบของหน้าต่างป๊อปอัพ มันมีปัญหา แต่ก็ไม่ได้ใช้ในที่สุด
รหัสยังคงเป็นหยิกเล็กน้อยและให้ตรรกะการใช้งานคร่าวๆ
แนวคิดการใช้งาน: วางหน้ากากบนหน้าต่างเพื่อบล็อกปุ่มฟังก์ชั่นหน้าต่างต้นฉบับและตระหนักถึงหน้าต่างป๊อปอัพที่ตำแหน่งสัมบูรณ์ที่ชั้นบนของหน้ากาก การโต้ตอบข้อมูลในหน้าต่างป๊อปอัปคือวิธี AJAX ใช้ onclick เพื่อเริ่มกิจกรรมป๊อปอัพ
รายละเอียดคีย์: หน้าต่างป๊อปอัพและแบบฟอร์มดั้งเดิมเป็นหน้าเดียวกัน เพื่อความสะดวกของคำอธิบายให้โทรไปที่แบบฟอร์มด้านล่างรูปแบบผู้ปกครองและหน้าต่างป๊อปอัพแบบฟอร์มเด็ก เพื่อให้บรรลุปฏิสัมพันธ์ของแบบฟอร์มหลักคุณต้องสร้างป้ายกำกับพิเศษบางอย่างในแบบฟอร์มหลักเพื่อให้ตัวเลือกสามารถเลือกและแทรกวัตถุ DOM ใหม่
ด้วยวิธีนี้ก่อนอื่นให้ดูที่รหัสของแบบฟอร์มหลัก ฉันมีความคิดเห็นเกี่ยวกับส่วนสำคัญ
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" เนื้อหา = "ข้อความ/html; charset = utf-8"> <meta name = "viewport" name = "Apple-Mobile-Web-App-App-Capable" Content = "ใช่"> <meta name = "Apple-Mobile-Web-App-Status-Bar-bar-style" content = "Black"> <title> ทดสอบป๊อปอัพ </title> <script type = "text/javaScript" src = "scripts/jquery.js 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 = href = "สคริปต์/jQuery/ธีม/ui-lightness/jQuery.ui.css"> <script charset = "utf-8" type = "text/javascript" src = "สคริปต์/ไดอะล็อก/ไดอะล็อก id" dialog.css "dialog.js type = "text/css"> <style type = "text/css"> *{margin: 0; Padding: 0; TEXT-ALIGN: CENTER; การตกแต่งข้อความ: ไม่มี; } ร่างกาย {ตัวอักษร: 12px/1.5 Songyi, Tahoma, Arial, Sans-Serif; Font-Family: "Microsoft Yahei"; ความกว้าง: 320px; ความสูง: อัตโนมัติ; มาร์จิ้น: 0 อัตโนมัติ; } .Content {Border: #CCC SOLID 1PX; มาร์จิ้น: 60px 10px 10px; ความเป็นมา: #FFF; ล้น: ซ่อน; สี:#6b6b6b; ขนาดตัวอักษร: 14px; แนวชายแดน: 5px; } </style> </head> <body> <!-ตัวเลือกถูกเลือกโดย ectType = "กล่องโต้ตอบ"-> <div> <a href = "JavaScript: void (0);" ectType = "Dialog" Dialog_id = "Dialog_test" Dialog_title = "Dialogue Test Test" Dialog_width = "300" uri = "pop_son.html"> การทดสอบการโต้ตอบ </a> </div> </body> </html>จากนั้นให้ส่วนตัวเลือกของรหัสนั่นคือรหัสของ outil.js แน่นอนฉันจะไม่พูดถึง jQuery และ jQuery UI ก่อนหน้านี้ ที่แกนกลางของมันมันถูกผูกไว้กับเหตุการณ์คลิก
jQuery.extend ({getCookie: ฟังก์ชั่น (sname) {var acookie = document.cookie.split (";"); สำหรับ (var i = 0; i <acookie.length; i ++) {var acrumb = acookie [i]. split ("="); }, setcookie: ฟังก์ชั่น (sname, svalue, sexpires) {var scookie = sname + "=" + encodeuricomponent (svalue); Expires = ศุกร์, 31 ธ.ค. 1999 23:59:59 gmt; ";}}); $ (ฟังก์ชัน () { /*กล่องโต้ตอบเลือกและผูกเหตุการณ์คลิกใหม่* / $ ('*[ectype =" dialog "]') คลิก (ฟังก์ชั่น () {var id = $ (this) $ (นี้) .attr ('dialog_title'): ''; = URL; }}/* แสดงรูปแบบ ajax*/ฟังก์ชั่น ajax_form (id, ชื่อ, url, ความกว้าง) {ถ้า (! width) {width = 400; } var d = dialogManager.create (id); D.Settitle (ชื่อ); D.SetContents ('AJAX', URL); d.setWidth (ความกว้าง); D.SHOW ('ศูนย์'); return d;} function go (url) {window.location = url;} function set_zindex (ผู้ปกครอง, ดัชนี) {$ .each (ผู้ปกครอง, ฟังก์ชั่น (i, n) {ถ้า ($ (n) .css ('ตำแหน่ง') == 'ญาติ') {// alert '); $ (n) .css ('z-index', ดัชนี);}});} ฟังก์ชั่น 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);} ฟังก์ชั่น js_fail (str) {$ ('#คำเตือน'). html ('<label>' + str + '</label>'); $ ('#warning'). show ();} ฟังก์ชั่น check_pint (v) {var regu = /^[0-9] {1,} $ /; if (! regu.test (v)) {แจ้งเตือน (lang.only_int); กลับเท็จ; } return true;}/ * แปลง & */function transform_char (str) {if (str.indexof ('&')) {str = str.replace (/&/g, "%26"); } return str;} // คัดลอกไปยังฟังก์ชันคลิปบอร์ด copytoclipboard (txt) {if (window.clipboarddata) {window.clipboarddata.clearData (); window.clipboarddata.setData ("ข้อความ", txt); } อื่นถ้า (navigator.useragent.indexof ("opera")! = -1) {window.location = txt; } อื่นถ้า (window.netscape) {ลอง {netscape.security.privilegeManager.enablePrivilege ("UniversalxpConnect"); } catch (e) {return false; } var clip = components.classes ['@mozilla.org/widget/clipboard;1'.keateinstance(components.interfaces.nsiclipboard); ถ้า (! คลิป) ส่งคืนเท็จ; var trans = components.classes ['@mozilla.org/widget/transferable;1'.keateinstance(components.interfaces.nsitransferable); ถ้า (! ทรานส์) ส่งคืนเท็จ; trans.adddataflavor ('text/unicode'); var str = วัตถุใหม่ (); var len = วัตถุใหม่ (); var str = components.classes ["@mozilla.org/supports-string;1" like.createinstance(components.interfaces.nsisupportsstring); var ลิขสิทธิ์ = txt; str.data = copytext; trans.setTransferData ("ข้อความ/unicode", str, copytext.length*2); var clipid = components.interfaces.nsiclipboard; ถ้า (! คลิป) ส่งคืนเท็จ; clip.setData (trans, null, clipid.kglobalclipboard); -รหัสที่เกี่ยวข้องสำหรับเหตุการณ์การเชื่อมโยงคือรหัสหลักของกล่องโต้ตอบ (Dialog.js) พบว่าออนไลน์ ขอบคุณที่นี่ รหัสมีดังนี้:
__dialog_wrapper__ = {};/* มีข้อผิดพลาดใน IE6 หากไม่ได้รับความกว้างของกล่องโต้ตอบกล่องโต้ตอบจะแสดงด้วยความกว้าง 100% ใน IE6*/DialogManager = {'Create': ฟังก์ชั่น (id) {var d = {}; if (! __ dialog_wrapper __ [id]) {d = กล่องโต้ตอบใหม่ (id); __dialog_wrapper __ [id] = d; } else {d = dialogManager.get (id); } return d; }, 'get': ฟังก์ชัน (id) {return __dialog_wrapper __ [id]; }, 'close': ฟังก์ชัน (id) {ถ้า (__dialog_wrapper __ [id] .close ()) {__dialog_wrapper __ [id] = null; }}, 'onClose': function () {return true; }, /* load dialog style* / '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') หลังจาก ('<link href = "' + _dialog_css + '" rel = "stylesheet" type = "text /css" />'); }}; screenlocker = {'style': {'ตำแหน่ง': 'Absolute', 'Top': '0px', 'ซ้าย': '0px', 'BackgroundColor': '#000', 'Opacity': 0.5, 'zindex': 999}, 'masker' this.masker.width ($ (เอกสาร) .width ()). ความสูง ($ (เอกสาร) .height ()); กลับมาจริง; } this.masker = $ ('<div> </div>'); / * ie6 hack */ if ($. browser.msie) {$ ('เลือก'). css ('การมองเห็น', 'ซ่อน'); } // var _iframe = $ ('<iframe> </iframe>'). css ({'ความทึบ': 0, 'ความกว้าง': '100%', 'ความสูง': '100%'}); //this.masker.append(_iframe); /* style*/ this.masker.css (this.style); if (zindex) {this.masker.css ('zindex', zindex); } /* ความกว้างและความสูงของเอกสารทั้งหมด* / this.masker.width ($ (เอกสาร) .width ()). ความสูง ($ (เอกสาร) .Height ()); $ (document.body) .append (this.masker); }, 'ปลดล็อค': function () {ถ้า (this.masker === null) {return true; } this.masker.remove (); this.masker = null; / * ie6 hack */ if ($ .browser.msie) {$ ('เลือก'). css ('การมองเห็น', 'มองเห็นได้'); }}}; dialog = function (id) { / * ตัวสร้างสร้างรหัสโต้ตอบและเพิ่มลงในเอกสาร * / this.id = id; this.init ();}; dialog.prototype = { / * ตัวระบุที่ไม่ซ้ำ * / 'id': null, / * document object * / 'dom': null, 'lastpos': null, 'สถานะ': 'เสร็จสมบูรณ์', 'onclose': function () }, 'tmp': {}, /* เริ่มต้น* / 'init': function () {this.dom = {'wrapper': null, 'body': null, 'head': null, 'title': null, 'close_button': null, 'เนื้อหา': null}; /* สร้างคอนเทนเนอร์ด้านนอก*/this.dom.wrapper = $ ('<div id = "dialog_object_' + this.id + '"> </div>') รับ (0); /* สร้างกล่องโต้ตอบ*/this.dom.body = $ ('<div> </div>') รับ (0); /* สร้างแถบชื่อเรื่อง*/this.dom.ad = $ ('<h3> </h3>') รับ (0); /* สร้างข้อความชื่อเรื่อง*/this.dom.title = $ ('<span> </span>') รับ (0); /* สร้างปุ่มปิด*///this.dom.close_button = $ ('<span> ปิด </span>') รับ (0); /* สร้างพื้นที่เนื้อหา*/this.dom.content = $ ('<div> </div>') รับ (0); /* สร้างพื้นที่เนื้อหา*/this.dom.content = $ ('<div> </div>') รับ (0); /* ชุดค่าผสม*/$ (this.dom.head) .append ('<div> </div> <div> </div>'). ผนวก ($ ('<span> </span>') ภาคผนวก (this.dom.title)) ต่อผนวก (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: ทั้งสอง; แสดง: block;"> </div>'); /* รูปแบบการเริ่มต้น*/ $ (this.dom.wrapper) .css ({'zindex': 9999, 'แสดง': 'ไม่มี', 'ตำแหน่ง': 'Absolute'}); $ (this.dom.body) .css ({'ตำแหน่ง': 'ญาติ'}); $ (this.dom.head) .css ({'เคอร์เซอร์': 'ย้าย'}); $ (this.dom.close_button) .css ({'ตำแหน่ง': 'Absolute', 'Text-Indent': '-99999px', 'Cursor': 'Pointer', 'Overflow': 'Hidden'}); $ (this.dom.content) .css ({'margin': '0px', 'padding': '0px'}); var self = this; /* เริ่มต้นเหตุการณ์ส่วนประกอบ*/ $ (this.dom.close_button) .click (function () {dialogManager.close (self.id);}); / * drag และ drop */ $ (this.dom.wrapper) .Draggable ({'handle': this.dom.head}); /* ใส่ในสตรีมเอกสาร*/ $ (document.body) .append (this.dom.wrapper); }, /* ซ่อน* / 'ซ่อน': function () {$ (this.dom.wrapper) .hide (); }, / * show * / 'show': function (pos) {if (pos) {this.setPosition (pos); } /* ล็อคหน้าจอ* / screenlocker.lock (999); /* แสดงกล่องโต้ตอบ*/ $ (this.dom.wrapper) .show (); }, /* close* / 'close': function () {ถ้า (! this.onclose ()) {return false; } /* ปิดกล่องโต้ตอบ* / $ (this.dom.wrapper) .remove (); /* ปลดล็อกหน้าจอ*/ screenlocker.unlock (); กลับมาจริง; }, /* ชื่อเรื่องโต้ตอบ* / 'settitle': ฟังก์ชั่น (ชื่อ) {$ (this.dom.title) .html (ชื่อ); }, /* เปลี่ยนเนื้อหากล่องโต้ตอบ* / 'setContents': ฟังก์ชั่น (ประเภท, ตัวเลือก) {contents = this.createContents (ประเภท, ตัวเลือก); if (typeof (เนื้อหา) == 'string') {$ (this.dom.content) .html (เนื้อหา); } else {$ (this.dom.content) .empty (); $ (this.dom.content) .append (เนื้อหา); }}, /* ตั้งค่ากล่องโต้ตอบสไตล์* / 'setStyle': ฟังก์ชั่น (สไตล์) {ถ้า (typeof (style) == 'Object') { /* มิฉะนั้นจะเป็น css* / $ (this.dom.wrapper) .css (สไตล์); } else { / * ถ้าเป็นสตริงมันจะถือว่าเป็นชื่อสไตล์ * / $ (this.dom.wrapper) .addclass (สไตล์); }}, 'setWidth': ฟังก์ชั่น (ความกว้าง) {this.setStyle ({'width': width + 'px'}); }, 'setheight': ฟังก์ชั่น (ความสูง) {this.setStyle ({'ความสูง': ความสูง + 'px'}); }, /* สร้างเนื้อหาโต้ตอบ* / 'createContents': ฟังก์ชั่น (ประเภท, ตัวเลือก) {var _html = '', self = this, status = 'เสร็จสมบูรณ์'; if (! ตัวเลือก) { / * หากมีเพียงพารามิเตอร์เดียวก็จะถือว่าเป็นสตริง HTML * / this.setStatus (สถานะ); ประเภทกลับ; } switch (type) {case 'ajax': /* รับ HTML ผ่าน AJAX และแสดงบนหน้า กระบวนการนี้เป็นแบบอะซิงโครนัส*/ $ .get (ตัวเลือก, {ajax: 1}, ฟังก์ชั่น (ข้อมูล) {ถ้า (data.substr (0,1) == '{' && data.substr (data.length - 1, 1) == '}') return;}} self.setcontents (ข้อมูล); 'ปิด') {self.close ();}}); / * แจ้งแรกว่ามันกำลังโหลด */ _html = this.createContents ('โหลด', {'text': 'การโหลด ... '}); หยุดพัก; /* ต่อไปนี้เป็นกล่องโต้ตอบในตัวหลายประเภท*/กรณี 'การโหลด': _html = '<div> <div>' + ตัวเลือกข้อความ + '</div> </div>'; สถานะ = 'โหลด'; หยุดพัก; กรณี 'ข้อความ': var type = 'ประกาศ'; if (opptions.type) {type = opotions.type; } _message_body = $ ('<div> </div>'); _message_contents = $ ('<div>' + ตัวเลือกข้อความ + '</div>'); _buttons_bar = $ ('<div> </div>'); สวิตช์ (พิมพ์) {กรณี 'ประกาศ': กรณี 'คำเตือน': var button_name = lang.confirm; if (options.button_name) {button_name = opotions.button_name; } _ok_button = $ ('<อินพุตประเภท = "ปุ่ม" value = "' + button_name + '" />'); $ (_ ok_button) .lick (function () {if (options.onclick) {if (! opotions.onclick.call ()) {return;}} dialogManager.close (self.id);}); $ (_ buttons_bar) .append (_ok_button); หยุดพัก; กรณี 'ยืนยัน': 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 = $ ('<อินพุตประเภท = "ปุ่ม" value = "' + ใช่ _button_name + '" />'); _no_button = $ ('<อินพุตประเภท = "ปุ่ม" value = "' + no_button_name + '" />'); $ (_ ใช่ _Button) .Click (function () {if (options.onclickyes) {ถ้า (ตัวเลือก onclickyes.call () === เท็จ) {return;}} dialogManager.close (self.id);}); $ (_ no_button) .lick (function () {if (opptions.onclickno) {ถ้า (ตัวเลือก onclickno) {if (! opotions.onclickno.call ()) {return;}} dialogmanager.close (self.id);}); $ (_ buttons_bar) .append (_yes_button) .append (_no_button); หยุดพัก; } _html = $ (_ message_body) .append (_message_contents) .append (_buttons_bar); หยุดพัก; } this.setstatus (สถานะ); กลับ _html; }, /* ตำแหน่ง* / 'setPosition': ฟังก์ชั่น (pos) { /* ตำแหน่งสุดท้าย* / 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 (); / * ซ้าย = ความกว้างของแถบเลื่อน + (พื้นที่ดูปัจจุบัน - ความกว้างของกล่องโต้ตอบ) / 2 * / ซ้าย = $ (หน้าต่าง). Scrollleft () + ($ (หน้าต่าง) .width () - Dialog_width) / 2; / * top = ความสูงของแถบเลื่อน + (พื้นที่ดูปัจจุบัน - ความสูงของกล่องโต้ตอบ) / 2 * / top = $ (หน้าต่าง) .scrolltop () + ($ (หน้าต่าง) .height () - Dialog_Height) / 2; $ (this.dom.wrapper) .css ({ซ้าย: ซ้าย + 'px', top: top + 'px'}); หยุดพัก; }} 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); }}, /* ตั้งค่าสถานะ* / 'setStatus': ฟังก์ชัน (รหัส) {this.status = code; }, /* รับสถานะ* / 'getStatus': function () {return this.status; }, 'disableClose': ฟังก์ชั่น (msg) {this.tmp ['oldonclose'] = this.onclose; this.onclose = function () {if (msg) Alert (msg); กลับเท็จ; - }, 'enableClose': function () {this.onclose = this.tmp ['oldonclose']; this.tmp ['oldonclose'] = null; }}; // removeByzzy20160909: แนะนำไฟล์สไตล์ด้วยตนเอง //dialogManager.loadstyle ();ตกลงข้างต้นคือการใช้ตรรกะหลักและการใช้งานรหัส รหัสอธิบายกระบวนการทั้งหมดได้ดีและไม่จำเป็นต้องเสียข้อความ ฉันจะโพสต์รูปแบบย่อยที่นี่
<style> .btn {มาร์จิ้น: 10px 5px; ความกว้าง: 100px; } </style> <form method = "post" action = "{$ myAction}" id = "popupform"> <div style = "margin-top: 10px;" > <p> เนื้อหาที่แสดงที่นี่อาจเป็นรูปแบบหรือไม่ใช่รูปแบบ <input type = "hidden" name = "ret_url" value = "{$ ret_url}"/> </p> <อินพุต type = "submit" value = "เสร็จสมบูรณ์"/> </div>ในที่สุดฉันจะโพสต์การแสดงผลอีกครั้ง
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น