كانت الخطة الأصلية هي تحقيق مثل هذا الشرط: يؤدي نقرة المكتب الاستقبلي إلى إجراء إجراء تجاري ، ويحتاج المستخدم إلى استكمال المعلومات ، دون القفز على الصفحة ، واستكمال المعلومات في شكل النوافذ المنبثقة. كان الأمر مضطربًا ، لكنه لم يستخدم في النهاية.
لا يزال الرمز مندهشًا بعض الشيء ويوفر منطق تنفيذ خشن.
فكرة التنفيذ: ضع قناعًا على النافذة لحظر زر وظيفة النافذة الأصلية ، وتحقق من النوافذ المنبثقة في المواقع المطلقة على الطبقة العليا من القناع. تفاعل البيانات في النافذة المنبثقة هو طريقة AJAX. استخدم OnClick لبدء الحدث المنبثقة.
التفاصيل الرئيسية: النافذة المنبثقة والنموذج الأصلي هي في الأساس نفس الصفحة. لراحة الوصف ، دعنا نسمي النموذج السفلي النموذج الأصل والنافذة المنبثقة في شكل الطفل. من أجل تحقيق تفاعل النموذج الأصل ، تحتاج إلى إنشاء بعض الملصقات الخاصة في النموذج الأصل حتى يتمكن المحدد من تحديد وإدراج كائن DOM جديد.
وبهذه الطريقة ، انظر أولاً إلى رمز النموذج الأصل. لدي تعليقات على الجزء الرئيسي.
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8" name = "Apple-Mobile-Web-App-App-content =" yes "> <meta name =" Apple-mobile-web-app-app-status-bar-style "content =" black "> <titure> test pop-up </title> <script type =" text/javascript "src =" script/jquery/jquery. type = "text/javaScript" src = "script/js/outil.js" charset = "utf-8"> </script> <script charset = "utf-8" type = "text/javaScript" src = "script/jquery/jquery href = "script/jquery/temes/ui lightness/jquery.ui.css"> <script charset = "utf-8" type = "text/javaScript" src = "script/dialog/dialog" id = "direog_js" type = "text/css"> <style type = "text/css"> *{margin: 0 ؛ الحشو: 0 ؛ محاذاة النص: المركز ؛ تدمير النص: لا شيء ؛ } body {font: 12px/1.5 songyi ، tahoma ، arial ، sans-serif ؛ Font-Family: "Microsoft Yahei" ؛ العرض: 320 بكسل ؛ الارتفاع: السيارات ؛ الهامش: 0 Auto ؛ } .Content {border: #ccc solid 1px ؛ الهامش: 60px 10px 10px ؛ الخلفية: #fff ؛ الفائض: مخفي. اللون:#6B6B6B ؛ حجم الخط: 14px ؛ الحدود الحدودية: 5px ؛ } </style> </head> <body> <!-يتم تحديد المحدد بواسطة ecttype = "Dialog"-> <viv> <a href = "javaScript: void (0) ؛" ecttype = "dialog" dialog_id = "dialog_test" dialog_title = "dialogure test" dialog_width = "300" uri = "pop_son.html" test intثم أعط جزء المحدد من الكود ، أي رمز Outil.js. بالطبع ، لن أتحدث عن jQuery و jQuery UI السابقة. في جوهرها ، لا بد أن تنقر على الأحداث.
jquery.extend ({getCoOkie: function (sname) {var acookie = document.cookie.split ( } ، setcookie: sname ، svalue ، sexpires) {var scookie = sname + "=" encodeuricomponent (svalue) ؛ انتهاء الصلاحية = الجمعة ، 31 ديسمبر 1999 23:59:59 gmt ؛ "؛}}) ؛ $ (function () { /*dialog حدد وربط حدث نقرة جديدة* / $ ('*[eCtype =" dialog "]']. $ (this) .attr ('dialog_title'): '' = url ؛ }}/* show form ajax*/function ajax_form (id ، title ، url ، width) {if (! width) {width = 400 ؛ } var d = dialogmanager.create (id) ؛ D.Settitle (العنوان) ؛ D.SetContents ('Ajax' ، url) ؛ D.SetWidth (العرض) ؛ D.Show ('Center') ؛ return d ؛} وظيفة go (url) {window.location = url ؛} الدالة set_zindex (أولياء الأمور ، الفهرس) {$ .each (أولياء الأمور ، الدالة (i ، n) {if ($ (n) .css ('position') == 'REPERATION') {// ALERT ('RIPATION') ؛ $ (n) .css ('z-index' ، index) ؛ var url = window.location.href ؛ url = url.indexof ('#')> 0؟ url.replace (/#/g ، ''): url ؛ window.location.replace (url) ؛} الدالة js_fail (str) {$ ('#تحذير'). $ ('#تحذير'). show () ؛} check_pint (v) {var regu = /^[0-9] {1 ،} $ /؛ if (! regu.test (v)) {Alert (lang.only_int) ؛ العودة كاذبة } return true ؛}/ * convert & */function transform_char (str) {if (str.indexof ('&')) {str.replace (/&/g ، "٪ 26") ؛ } return str ؛} // copy to clipboard copytoclipboard (txt) {if (window.clipboarddata) {window.clipboarddata.cleardata () ؛ window.clipboarddata.setData ("text" ، txt) ؛ } آخر إذا (navigator.useragent.indexof ("Opera")! = -1) {window.location = txt ؛ } آخر إذا (window.netscape) {try {netscape.security.privileGemanager.EnablePrivilege ("UniversalxpConnect") ؛ } catch (e) {return false ؛ } var clip = components.classes ['@mozilla.org/widget/clipboard؛1'/10.createinstance(components.interfaces.nsiclipboard) ؛ إذا (! مقطع) العودة كاذبة ؛ var trans = components.classes ['@mozilla.org/widget/transferable ؛1'/10.createinstance(components.interfaces.nsitransferable) ؛ إذا (! trans) العودة خطأ ؛ trans.adddataflavor ('text/unicode') ؛ var str = new Object () ؛ var len = new Object () ؛ var str = components.classes ["@mozilla.org/supports-tring ؛1"/201.createinstance(components.Interfaces.nsisupportsString) ؛ var حقوق الطبع والنشر = txt ؛ str.data = copyText ؛ trans.setTransferData ("text/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': function (id) {var d = {} ؛ if (! __ dialog_wrapper __ [id]) {d = new Dialog (id) ؛ __dialog_wrapper __ [id] = d ؛ } آخر {d = dialogmanager.get (id) ؛ } العودة د ؛ } ، 'get': function (id) {return __dialog_wrapper __ [id] ؛ } ، 'close': function (id) {if (__dialog_wrapper __ [id] .close ()) {__dialog_wrapper __ [id] = null ؛ }} ، 'onClose': function () {return true ؛ } ، /* تحميل نمط الحوار* / '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). $ ('#dialog_js'). بعد ('<link href = "' ' + _dialog_css +'" rel = "STYLESHEET" type = "text /css" /> ') ؛ }} ؛ screklocker = {'style': {'position': 'absolute' ، 'top': '0px' ، 'left': '0px' ، 'backgroundColor': '#000' ، 'opatex': 0.5 ، 'zindex': 999} ، 'masker': null ، 'lock': zindex) this.masker.width ($ (document) .width ()). الارتفاع ($ (document) .hight ()) ؛ العودة صحيح. } this.masker = $ ('<viv> </viv>') ؛ / * ie6 hack */ if ($ .browser.msie) {$ ('select'). css ('الرؤية' ، 'Hidden') ؛ } // var _iframe = $ ('<frame> </frame>'). //this.masker.append(_iframe) ؛ /* style*/ this.masker.css (this.style) ؛ if (zindex) {this.masker.css ('Zindex' ، Zindex) ؛ } /* عرض وارتفاع المستند بأكمله* / this.masker.width ($ (document) .width ()). $ (document.body) .Append (this.masker) ؛ } ، 'inlock': function () {if (this.masker === null) {return true ؛ } this.masker.remove () ؛ this.masker = null ؛ / * ie6 hack */ if ($ .browser.msie) {$ ('select'). css ('الرؤية' ، 'Visible') ؛ }}} ؛ Dialog = function (id) { / * يقوم المنشئ بإنشاء رمز الحوار ويضيفه إلى المستند * / this.id = id ؛ this.init () ؛} ؛ dialog.prototype = { / * exhirection ediousier * / 'id': null ، / * document object * / 'dom': null ، 'lastpos': null ، 'status': 'complete' ، 'onClose': function () {return true ؛ } ، 'tmp': {} ، /* initialize* / 'init': function () {this.dom = {'wrapper': null ، 'body': null ، 'head': null ، 'title': null ، 'close_button': null ، 'content': null} ؛ /* إنشاء حاوية خارجية*/this.dom.wrapper = $ ('<div id = "dialog_object_' + this.id + '"> </viv>'). get (0) ؛ /* إنشاء جسم مربع الحوار*/this.dom.body = $ ('<viv> </viv>'). get (0) ؛ /* إنشاء شريط العنوان*/this.dom.head = $ ('<h3> </h3>'). get (0) ؛ /* إنشاء نص العنوان*/this.dom.title = $ ('<span> </span>'). get (0) ؛ /* إنشاء زر إغلاق*///this.dom.close_button = $ ('<span> إغلاق </span>'). get (0) ؛ /* إنشاء منطقة محتوى*/this.dom.content = $ ('<viv> </viv>'). get (0) ؛ /* إنشاء منطقة محتوى*/this.dom.content = $ ('<viv> </viv>'). get (0) ؛ /* COMBLE*/$ (this.dom.head) .Append ('<viv> </viv> <viv> </viv>'). إلحاق ($ ('<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: clo ؛ display:"> </viv>') ؛ /* نمط التهيئة*/ $ (this.dom.wrapper) .css ({'Zindex': 9999 ، 'Display': 'none' ، 'position': 'absolute'}) ؛ $ (this.dom.body) .css ({'position': 'النسبية'}) ؛ $ (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 ؛ /* تهيئة الحدث المكون*/ $ (this.dom.close_button) .click (function () {dialogmanager.close (self.id) ؛}) ؛ / * سحب وإسقاط */ $ (this.dom.wrapper) .draggable ({'handle': this.dom.head}) ؛ /* وضع في دفق المستند*/ $ (document.body) .Append (this.dom.wrapper) ؛ } ، /* Hide* / 'Hide': function () {$ (this.dom.wrapper) .hide () ؛ } ، / * show * / 'show': function (pos) {if (pos) {this.setPosition (pos) ؛ } /* قفل شاشة* / screenlocker.lock (999) ؛ /* show dialog*/ $ (this.dom.wrapper) .show () ؛ } ، /* close* / 'close': function () {if (! this.onclose ()) {return false ؛ } /* حوار إغلاق* / $ (this.dom.wrapper) .remove () ؛ /* فتح الشاشة*/ screenClocker.unlock () ؛ العودة صحيح. } ، /* عنوان الحوار* / 'Settitle': function (title) {$ (this.dom.title) .html (title) ؛ } ، /* قم بتغيير محتوى مربع الحوار* / 'setContents': function (type ، reports) {contents = this.createContents (type ، Options) ؛ if (typeof (contents) == 'string') {$ (this.dom.content) .html (contents) ؛ } آخر {$ (this.dom.content) .empty () ؛ $ (this.dom.content) .append (محتويات) ؛ }} ، /* قم بتعيين نمط مربع الحوار* / 'setStyle': function (style) {if (typeof (style) == 'Object') { /* وإلا فهو css* / $ (this.dom.wrapper) .css (style) ؛ } آخر { / * إذا كانت سلسلة ، فهي تعتبر اسم النمط * / $ (this.dom.wrapper) .addClass (style) ؛ }} ، 'setWidth': function (width) {this.setStyle ({'width': width + 'px'}) ؛ } ، 'setheight': function (height) {this.setStyle ({'height': height + 'px'}) ؛ } ، /* إنشاء محتوى مربع الحوار* / 'createContents': function (type ، reports) {var _html = '' ، self = this ، status = 'complete' ؛ إذا كان (! خيارات) { / * إذا كانت هناك معلمة واحدة فقط ، فإنها تعتبر سلسلة HTML * / this.setStatus (الحالة) ؛ نوع العودة } switch (type) {case 'ajax': /* get html من خلال ajax وعرضه على الصفحة. هذه العملية غير متزامنة*/ $ .get (الخيارات ، {ajax: 1} ، الدالة (البيانات) {if (data.substr (0،1) == '{' && data.substr (data.length - 1 ، 1) == '}') {var json = eval (' + data +') ') العودة ؛ 'Close') {self.close () ؛ ) استراحة؛ /* فيما يلي عدة أنواع مربعات حوار مدمجة*/حالة "التحميل": _html = '<viv> <viv>' + Options.text + '</viv> </viv>' ؛ الحالة = "التحميل" ؛ استراحة؛ حالة "رسالة": var type = 'إشعار' ؛ if (Options.type) {type = options.type ؛ } _message_body = $ ('<viv> </viv>') ؛ _message_contents = $ ('<viv>' + Options.text + '</viv>') ؛ _buttons_bar = $ ('<viv> </viv>') ؛ Switch (type) {case 'number': case 'Warning': var button_name = lang.confirm ؛ if (Options.button_name) {button_name = options.button_name ؛ } _ok_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) ؛ استراحة؛ حالة "تأكيد": 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) ؛ استراحة؛ } _html = $ (_ message_body) .append (_message_contents) .Append (_buttons_bar) ؛ استراحة؛ } this.setStatus (الحالة) ؛ العودة _html ؛ } ، /* position* / 'setPosition': function (pos) { /* last 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 = عرض شريط التمرير + (منطقة المشاهدة الحالية - عرض مربع الحوار) / 2 * / LEFT = $ (window) .scrollleft () + ($ (window) .width () - dialog_width) / 2 ؛ / * TOP = ارتفاع شريط التمرير + (منطقة المشاهدة الحالية - ارتفاع مربع الحوار) / 2 * / TOP = $ (window) .scrolltop () + ($ (window) .Height () - dialog_height) / 2 ؛ $ (this.dom.wrapper) .css ({left: left + 'px' ، top: top + 'px'}) ؛ استراحة؛ }} آخر {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) ؛ العودة كاذبة } ؛ } ، 'enableClose': function () {this.onclose = this.tmp ['oldonclose'] ؛ this.tmp ['oldonclose'] = null ؛ } ؛حسنًا ، ما سبق هو المنطق الأساسي وتنفيذ التعليمات البرمجية. يشرح الرمز العملية بأكملها جيدًا ، وليس هناك حاجة لإهدار النص. سأقوم بنشر الشكل الفرعي هنا.
<style> .btn {margin: 10px 5px ؛ العرض: 100px ؛ } </style> <method method = "post" Action = "{$ myaction}" id = "popupform"> <div style = "margin-top: 10px ؛" > <p> يمكن أن يكون المحتوى المعروض هنا نموذجًا أو غير شكل. <type type = "hidden" name = "ret_url" value = "{$ ret_url}"/> </p> <input type = "submit" value = "completأخيرًا ، سأقوم بنشر عرض آخر.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.