当初の計画は、そのような要件を達成することでした。フロントデスクはビジネスアクションをトリガーし、ユーザーはページをジャンプせずに情報を補足し、ポップアップウィンドウの形で情報を補足する必要があります。問題はありませんでしたが、最終的には使用されませんでした。
コードはまだ少し縮れており、大まかな実装ロジックを提供します。
実装のアイデア：ウィンドウにマスクを置いて元のウィンドウ関数ボタンをブロックし、マスクの上層に絶対的な位置にあるポップアップウィンドウを実現します。ポップアップウィンドウのデータ相互作用はAjaxメソッドです。 OnClickを使用してポップアップイベントを開始します。
重要な詳細：ポップアップウィンドウと元のフォームは、基本的に同じページです。説明の便利さのために、底部フォームを親フォームとポップアップウィンドウを子供フォームと呼びましょう。親フォームの相互作用を実現するには、セレクターが新しいDOMオブジェクトを選択して挿入できるように、親フォームにいくつかの特別なラベルを作成する必要があります。
このようにして、まず親フォームのコードを見てください。重要な部分についてコメントがあります。
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <meta name = "viewport =" "初期= 1.0 = <metaber name = "apple-mobile-web-app-capable" content = "yes"> <meta name = "apple-mobile-web-app-status-bar-style" content = "black"> <title>テストポップアップ</titple> <スクリプト> <text/javascript "src =" src = "" script/jquery/jquery.js "charset =" utf-8 "> < src = "script/js/outil.js" charset = "utf-8"> </scrip> <script charset = "utf-8" type = "text/javascript" src = "script/jquery/jquery.ui.ui.ui.ui.ui.ui.ui.ui.u href = "script/jquery/themes/ui-lightness/jquery.ui.css type = "text/css"> <style type = "text/css"> *{margin：0;パディング：0;テキストアライグ：センター;テキスト装置：なし; } body {font：12px/1.5 songyi、tahoma、arial、sans-serif;フォントファミリー：「Microsoft Yahei」;幅：320px;高さ：自動;マージン：0 Auto; } .content {border：#ccc solid 1px;マージン：60px 10px 10px;背景：#fff;オーバーフロー：隠し;色：＃6b6b6b;フォントサイズ：14px;ボーダーラジウス：5px; } </style> </head> <body> <！ - セレクターはecttype = "dialog"によって選択されます - > <div> <a href = "javascript：void（0）;" ecttype = "dialog" dialog_id = "dialog_test" dialog_title = "dialogue test" dialog_width = "300" uri = "pop_son.html">ダイアログテスト</a> </div> </body> </html>次に、セレクターにコードの一部、つまりoutil.jsのコードを指定します。もちろん、以前のJQueryとJQuery UIについては話しません。コアでは、イベントをクリックすることになります。
jquery.extend（{getcookie：function（sname）{var acookie = document.cookie.split（ ";"）; }、setcookie：sname、svalue、sexpires）{var scookie + "=" + ecodeuricomponent（svalue）; 1999年12月23:59:59 gmt; ";}}）; $（function（）{ /*ダイアログの選択とバインド新しいクリックイベント* / $（ '*[ectype =" dialog "]'）。 $（ 'dialog_title'）：$ $（ 'uri'）; = url; }}/* ajax formをshow*/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;} function go（url）{window.location = url;} function set_zindex（parents、index）{$ .each（i、n）{if（$（n）.css（ 'position'）== 'relative'）{// alert（ 'relative'）; //alert('z-index '）; $（n）.css（ 'z-index'、index）;} function 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）;} function js_fail（str）{$（ '＃warning'）。html（ '<label>' + str + '</label>'）; $（ '＃警告'）。show（）;} function check_pint（v）{var regu = /^[0-9] {1、} $ /; if（！regu.test（v））{alert（lang.only_int）; falseを返します。 } return true;}/ * convert＆ */function transform_char（str）{if（str.indexof（ '＆'））{str = str.replace（/＆/g、 "％26"）; } return str;} // copyに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）{false; } var Clip = components.classes ['@mozilla.org/widget/clipboard; 1' if（！clip）falseを返します。 var trans = components.classes ['@mozilla.org/widget/transferable;1' if（！trans）falseを返します。 trans.adddataflavor（ 'text/unicode'）; var str = new object（）; var len = new object（）; var str = components.classes ["@mozilla.org/supports-string;1" var Copyright = txt; str.data = copyText; trans.setTransferdata（ "text/unicode"、str、copytext.length*2）; var clipid = components.interfaces.nsiclipboard; if（！clip）falseを返します。 Clip.setData（trans、null、clipid.kglobalclipboard）; }}バインディングイベントに関連するコードは、ダイアログのコアコード（Dialog.js）です。これはオンラインで見つかりました。ここでありがとう。コードは次のとおりです。
__dialog_wrapper__ = {};/* IE6にはバグがあります。ダイアログボックスの幅が指定されていない場合、ダイアログボックスはIE6*/dialogManager = {'create'：function（id）{var d = {};に100％幅で表示されます。 if（！__ dialog_wrapper __ [id]）{d = new Dialog（id）; __dialog_wrapper __ [id] = d; } else {d = dialogmanager.get（id）; } return d; }、 '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）.join（ '/'） + '/dialog.css'; $（ '＃dialog_js'）。 }}; screenLocker = {'style'：{'position'： 'absolute'、 'top'： '0px'、 'left'： '0px'、 'backgroundcolor'： '＃000'、 'ofacity'：0.5、 'zindex'：999}、 'masker'：null！ this.masker.width（$（document）.width（））。height（$（document）.height（））; trueを返します。 } this.masker = $（ '<div> </div>'）; / * ie6 hack */ if（$ .browser.msie）{$（ 'select'）。css（ 'visibility'、 'hidden'）; } // var _iframe = $（ '<iframe> </iframe>'） //this.masker.append(_iframe）; /* style*/ this.masker.css（this.style）; if（zindex）{this.masker.css（ 'zindex'、zindex）; } /*ドキュメント全体の幅と高さ$（document.body）.append（this.masker）; }、 'Unlock'：function（）{if（this.masker === null）{return true; } this.masker.remove（）; this.masker = null; / * ie6 hack */ if（$ .browser.msie）{$（ 'select'）。css（ 'visibility'、 'visible'）; }}};ダイアログ= function（id）{ / *コンストラクターはダイアログコードを生成し、ドキュメントに追加します * / this.id = id; this.init（）;}; dialog.prototype = { / * inited identifier * / '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.dom.wrapper = $（ '<div id = "dialog_object_' + this.id + '"> </div>'）。get（0）; /*ダイアログボディを作成*/this.dom.body = $（ '<div> </div>'）。get（0）; /*タイトルバーを作成*/this.dom.head = $（ '<h3> </h3>'）。get（0）; /*タイトルテキストを作成*/this.dom.title = $（ '<span> </span>'）。get（0）; /*閉じるボタンの作成/*コンテンツエリアを作成*/this.dom.content = $（ '<div> </div>'）。get（0）; /*コンテンツエリアを作成*/this.dom.content = $（ '<div> </div>'）。get（0）; /* combuition*/$（this.dom.head）.append（ '<div> </div> <div> </div>'）。 $（this.dom.body）.append（this.dom.head）.append（this.dom.content）; $（this.dom.wrapper）.append（this.dom.body）.append（ '<div style = "clear：both; display：block;"> </div>'）; /*初期化スタイル*/ $（this.dom.wrapper）.css（{'zindex'：9999、 'display'： 'none'、 'position'： 'absolute'}）; $（this.dom.body）.css（{'position'： 'relative'}）; $（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）; } /* lock screen* / screenlocker.lock（999）; /*ダイアログを表示*/ $（this.dom.wrapper）.show（）; }、 /* close* / 'close'：function（）{if（！this.onclose（））{return false; } /* closeダイアログ* / $（this.dom.wrapper）.remove（）; /*画面のロックを解除*/ screenLocker.unlock（）; trueを返します。 }、 /*ダイアログタイトル* / 'settitle'：function（title）{$（this.dom.title）.html（title）; }、 /*ダイアログボックスコンテンツを変更* / 'setContents'：function（type、options）{contents = this.createContents（type、options）; if（typeof（contents）== 'string'）{$（this.dom.content）.html（contents）; } else {$（this.dom.content）.empty（）; $（this.dom.content）.append（contents）; }}、 /*ダイアログボックススタイルを設定* / 'setStyle'：function（style）{if（typeof（style）== 'object'）{ /* css* / $（this.dom.wrapper）.css（style）; } else { / *文字列の場合、スタイル名 * / $（this.dom.wrapper）.addclass（style）と見なされます。 }}、 'setWidth'：function（width）{this.setStyle（{'width'：width + 'px'}）; }、 'setheight'：function（height）{this.setStyle（{'height'：height + 'px'}）; }、 /*ダイアログコンテンツを生成* / 'CreateContents'：function（type、options）{var _html = ''、self = this、status = 'complete'; if（！options）{ / *パラメーターが1つしかない場合、それはHTML文字列 * / this.setStatus（status）と見なされます。返品タイプ。 } switch（type）{case 'ajax'： /* ajaxを介してHTMLを取得し、ページに表示します。このプロセスは非同期*/ $ .get（options、{ajax：1}、function（data）{if（data.substr（0,1）== '{' && data.substr（data.length -1、1）== '}'）{var json = eval（ ' + data +'）; returch.} self.setContents（データ）。 'close'）{self.close（）}; / *最初にロードしていることをプロンプト */ _html = this.createContents（ 'loading'、{'text'： 'loading ...'}）;壊す; /*以下は、いくつかの組み込みダイアログタイプです*/case 'loading'：_html = '<div> <div>' + options.text + '</div> </div>'; status = 'loading';壊す;ケース「メッセージ」：var type = 'nocation'; if（options.type）{type = options.type; } _message_body = $（ '<div> </div>'）; _message_contents = $（ '<div>' + options.text + '</div>'）; _buttons_bar = $（ '<div> </div>'）; switch（type）{case 'nocation'：case '警告'：var button_name = lang.confirm; if（options.button_name）{button_name = options.button_name; } _OK_BUTTON = $（ '<入力型= "button" value = "' + button_name + '" />'）; $（_ ok_button）.click（function（）{if（options.onclick）{if（！options.onclick.call（））{return;}} dialogmanager.close（self.id）;}）; $（_ bottons_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 = $（ '<入力型= "button" value = "' + yes_button_name + '" />'）; _NO_BUTTON = $（ '<入力型= "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）;}）; $（_ bottons_bar）.append（_yes_button）.append（_no_button）;壊す; } _html = $（_ message_body）.append（_message_contents）.append（_buttons_bar）;壊す; } this.setstatus（status）; return _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（）; / *左= Scrollbar +の幅（現在の表示領域 - ダイアログボックスの幅） / 2 * / left = $（window）.scrollleft（） +（$（window）.width（） - dialog_width） / 2; / * TOP = SCROLLBAR +の高さ（現在の表示領域 - ダイアログボックスの高さ） / 2 * / top = $（window）.scrolltop（） +（$（window）.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）; }}、 /* 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）; falseを返します。 }; }、 'enableClose'：function（）{this.onclose = this.tmp ['oldonclose']; this.tmp ['oldonclose'] = null; }}; // removebyzzy20160909：スタイルファイルを手動で紹介//dialogmanager.loadstyle（）;OK、上記はコアロジックとコードの実装です。コードはプロセス全体をよく説明しており、テキストを無駄にする必要はありません。ここにサブフォームを投稿します。
<style> .btn {マージン：10px 5px;幅：100px; } </style> <form method = "post" action = "{$ myaction}" id = "popupform"> <div style = "margin-top：10px;" > <p>ここに表示されるコンテンツは、フォームまたは非型にすることができます。 <入力型= "hidden" name = "ret_url" value = "{$ ret_url}"/> </p> <入力タイプ= "submit" value = "complete"/> </div> </form>最後に、別のレンダリングを投稿します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。