원래 계획은 이러한 요구 사항을 달성하는 것이 었습니다. 프런트 데스크 클릭은 비즈니스 작업을 트리거하며 사용자는 페이지를 뛰어 넘지 않고 정보를 보충해야하며 팝업 창 형태로 정보를 보충해야합니다. 문제가 있었지만 결국 사용되지 않았습니다.
코드는 여전히 약간 곱슬 곱슬하며 거친 구현 로직을 제공합니다.
구현 아이디어 : 원래 창 함수 버튼을 차단하기 위해 창에 마스크를 놓고 마스크의 상단 레이어에서 절대 위치에서 팝업 창을 실현하십시오. 팝업 창의 데이터 상호 작용은 Ajax 메소드입니다. OnClick을 사용하여 팝업 이벤트를 시작하십시오.
주요 세부 사항 : 팝업 창과 원래 양식은 본질적으로 동일한 페이지입니다. 설명의 편의를 위해 하단을 부모 양식과 팝업 창을 자식 양식이라고 부릅니다. 부모 형식의 상호 작용을 달성하려면 선택기가 새 DOM 객체를 선택하고 삽입 할 수 있도록 부모 형식으로 특수 레이블을 만들어야합니다.
이런 식으로 먼저 부모 양식의 코드를보십시오. 핵심 부분에 대한 의견이 있습니다.
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-quiv = "content-type"content = "text/html; charset = utf-8"> <meta name = "viewport" "initeal" 이름 = "Apple-Mobile-Web-App-Capable"Content = "Yes"> <meta name = "Apple-Mobile-web-app-status-bar 스타일"content = "black"> <title> 테스트 팝업 </title> <script type = "text/javaScript"src = "script/jquery/jquery.js"charset = "utf-8"> type = "text/javaScript"src = "script/js/outil.js"charset = "utf-8"> </script> <script charset = "utf-8"type = "text/javascript"src = "script/jquery/jquery.ui.js"> href = "script/jquery/trees/ui-lightness/jquery.ui.css"> <script charset = "utf-8"type = "text/javaScript"src = "script/dialog/dialog.js"id = "dialog_js"> </script> <link href = "script/dialog/dialog/dialog/dialog/dialog. type = "text/css"> <style type = "text/css"> *{마진 : 0; 패딩 : 0; 텍스트 정렬 : 센터; 텍스트 결정 : 없음; } Body {font : 12px/1.5 Songyi, Tahoma, Arial, Sans-serif; Font-Family : "Microsoft Yahei"; 너비 : 320px; 높이 : 자동; 여백 : 0 Auto; } .Content {Border : #CCC Solid 1PX; 여백 : 60px 10px 10px; 배경 : #fff; 오버플로 : 숨겨진; 색상 :#6B6B6B; 글꼴 크기 : 14px; Border-Radius : 5px; }. 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 : 함수 (sname) {var acookie = document.cookie.split ( ";"); for (var i = 0; i <acookie.length; i ++) {var acrumb = acookie [i] .split ( "="); if (sname = acrumb [0]) returnuric component (1); }, setcookie : sname, svalue, sexpires) {var scookie = sname + "="value); 만료 = fri, 1999 년 12 월 31 일 23:59:59 gmt; ";}}); $ (function () { /*대화 및 새로운 클릭 이벤트를 선택하고 바인딩합니다. attr ( 'dialog_title'). ''; = URL; }}/* show ajax form*/function ajax_form (id, title, url, width) {if (! width) {width = 400; } var d = dialogmanager.create (id); D. 세트 타이틀 (제목); d.setContents ( 'ajax', url); d.setwidth (너비); D.Show ( 'Centre'); return d;} function go (url) {wind $ (n) .css ( 'z-index', 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) {$ ( '#warning'). html ( '<lable>' + str + '</label>'); $ ( '#경고'). show ();} 함수 check_pint (v) {var regu = /^[0-9] {1,} $ /; if (! regu.test (v)) {alert (lang.only_int); 거짓을 반환합니다. } return true;}/ * convert & */function transfer_char (str) {if (str.indexof ( '&')) {str = str.replace (/&/g, "%26"); } return str;} // 클립 보드 함수에 복사 COPYTOCLIPBORD (txt) {if (wind Window.clipboardData.SetData ( "Text", TXT); } else if (navigator.useragent.indexof ( "opera")! = -1) {window.location = txt; } else if (wind } catch (e) {return false; } var clip = components.classes [ '@mozilla.org/widget/clipboard ;1'] .CreateInstance(components.interfaces.nsiclipboard); if (! clip) false를 반환합니다. var trans = components.classes [ '@mozilla.org/widget/transferable ;1'] .createinstance(components.interfaces.nsitransferable); if (! trans) false를 반환합니다. trans.adddataflavor ( 'text/unicode'); var str = new Object (); var len = new Object (); var str = components.classes [ "@mozilla.org/supports-String ;1"ECREATEINSTANCE(components.interfaces.nsisupportsString); var copyright = txt; str.data = 카피 텍스트; 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'에서 100% 너비로 표시됩니다. function (id) {var d = {}; if (! __ dialog_wrapper __ [id]) {d = new 대화 (id); __dialog_wrapper __ [id] = d; } else {d = dialogmanager.get (id); } 반환 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'). After ( '<link href = "' + _dialog_css + '"rel = "Stylesheet"type = "text /css" />'); }. this.masker.width ($ (document) .width ()). 높이 ($ (document) .height ()); 진실을 반환하십시오. } this.masker = $ ( '<div> </div>'); / * ie6 hack */ if ($ .Browser.msie) {$ ( 'select'). css ( 'Visibility', 'Hidden'); } // var _iframe = $ ( '<iframe> </iframe>'). css ({ '불투명도': 0, 'width': '100%', 'height': '100%'}); //this.masker.append(_iframe); /* 스타일*/ this.masker.css (this.style); if (zindex) {this.masker.css ( 'zindex', zindex); } /* 전체 문서의 너비 및 높이* / this.masker.width ($ (document) .width ()). 높이 ($ (document) .Height ()); $ (document.body) .append (this.masker); }, '잠금 해제': function () {if (this.masker === null) {return true; } this.masker.remove (); 이 .masker = null; / * ie6 hack */ if ($ .browser.msie) {$ ( 'select'). css ( '가시성', '가시성'); }}}; dialog = function (id) { / * 생성자는 대화 코드를 생성하여 문서에 추가 * / this.id = id; this.init ();}; dialog.prototype = { / * 고유 식별자 * / 'id': null, / * 문서 개체 * / 'dom': null, 'lastpos': null, 'status': 'complete', 'onclose': function () {return true; }, 'tmp': {}, /* 초기화* / 'init': function () {this.dom = { 'wrapper': null, 'body': null, 'head': 'null,'title ':'close_button ': null,'content ': null}; /* 외부 컨테이너를 만듭니다*/this.dom.wprapper = $ ( '<div id = "diclog_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.close_button = $ ( '<span> cose </span>'). get (0); /* 컨텐츠 영역 작성*/this.content = $ ( '<div> </div>'). get (0); /* 컨텐츠 영역 작성*/this.content = $ ( '<div> </div>'). get (0); /* combint*/$ (this.dom.head) .Append ( '<div> </div> <div> </div>'). Append ($ ( '<span> </span>'). Append (this.dom.title)). $ (this.dom.body) .append (this.dom.head) .append (this.dom.content); $ (this.dom.wrapper) .append (this.dom.body) .append ( '<div style = ""clear : 둘 다; 디스플레이; "> </div>'); /* 초기화 스타일*/ $ (this.dom.wrapper) .css ({ 'Zindex': 9999, 'display': 'none', 'position': 'Absolute'}); $ (this.dom.body) .css ({ 'position': 'elative'}); $ (this.dom.head) .css ({ 'cursor': 'move'}); $ (this.dom.close_button) .css ({ 'position': '절대', '텍스트 안정': '-9999px', 'cursor': '포인터', '오버 플로우': 'hidden'}); $ (this.dom.content) .css ({ 'margin': '0px', 'padding': '0px'}); var self = 이것; /* 구성 요소 이벤트 초기화*/ $ (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); /* 대화 상자 표시*/ $ (this.dom.wrapper) .show (); }, /* Close* / 'close': function () {if (! this.onclose ()) {return false; } /* 닫기 대화 상자* / $ (this.dom.wrapper) .remove (); /* 잠금 해제 화면*/ ScreenLocker.unlock (); 진실을 반환하십시오. }, /* 대화 제목* / 'settitle': function (title) {$ (this.dom.title) .html (title); }, /* 대화 상자 컨텐츠 변경* / 'setContents': 함수 (유형, 옵션) {contents = this.createContents (유형, 옵션); if (typeof (contents) == 'string') {$ (this.dom.content) .html (내용); } else {$ (this.dom.content) .Empty (); $ (this.dom.content) .append (내용); }}, /* 대화 상자 스타일 설정* / 'setStyle': function (style) {if (typeof (style) == 'Object') { /* 그렇지 않으면 css* / $ (this.dom.wrapper) .css (style); } else { / * 문자열 인 경우 스타일 이름 * / $ (this.dom.wrapper) .addclass (스타일)로 간주됩니다. }}, 'setWidth': 함수 (너비) {this.setStyle ({ 'width': width + 'px'}); }, 'setheight': 함수 (높이) {this.setStyle ({ 'height': height + 'px'}); }, /* 대화 상자 내용 생성* / 'createContents': 함수 (유형, 옵션) {var _html = '', self = this, status = '완료'; if (! 옵션) { / * 매개 변수가 하나만 있으면 HTML 문자열 * / this.setStatus (status)로 간주됩니다. 반환 유형; } switch (type) {case 'ajax': /* ajax를 통해 html을 가져 와서 페이지에 표시합니다. 이 프로세스는 비동기*/ $ .get (옵션, {ajax : 1}, function (data) {if (data.substr (0,1) == '{'&& data.substr (data.length -1, 1) == '}') {var json = val ( ' + data +') '); return} self.setContents (데이터); self.close (); / * 먼저로드중인 프롬프트 */ _html = this.createContents ( '로딩', { 'text': 'loading ...'}); 부서지다; /* 다음은 몇 가지 내장 대화 상자 유형입니다*/case 'loading': _html = '<div> <div>' + 옵션 .text + '</div> </div>'; 상태 = '로딩'; 부서지다; 사례 '메시지': var type = '통지'; if (Options.Type) {type = 옵션 .ttype; } _message_body = $ ( '<div> </div>'); _message_contents = $ ( '<div>' + 옵션 .text + '</div>'); _buttons_bar = $ ( '<div> </div>'); 스위치 (유형) {case 'indice': case '경고': var button_name = lang.confirm; if (옵션 .Button_Name) {button_name = 옵션 .Button_name; } _ok_button = $ ( '<input type = "button"value = "' + button_name + '" />'); $ (_ OK_BUTTON) .CLICK (function () {if (옵션.onclick) {if (! 옵션 .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 (옵션 .no_button_name) {no_button_name = 옵션 .no_button_name; }. _no_button = $ ( '<input type = "button"value = "' + no_button_name + '" />'); $ (_ Yes_Button) .click (function () {if (옵션 .onclickyes) {if (옵션 .onclickyes.call () === 거짓) {return;}} dialogmanager.close (self.id);}); $ (_ no_button) .click (function () {if (옵션 .onclickno) {if (옵션 .onclickno) {if (! 옵션.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': function (pos) { /* 마지막 위치* / this.lastpos = pos; if (typeof (pos) == 'string') {switch (pos) {case 'center': var left = 0; var top = 0; var chinlog_width = $ (this.dom.wrapper) .width (); var dialog_height = $ (this.dom.wrapper) .height (); / * 왼쪽 = 스크롤 바 +의 너비 (현재 시청 영역 - 대화 상자의 너비) / 2 * / 왼쪽 = $ (창) .scrollleft () + ($ (창) .width () - dialog_width) / 2; / * scrollbar +의 높이 (현재 시청 영역 - 대화 상자의 높이) / 2 * / top = $ (창) .scrolltop () + ($ (Window) .Height () - DILOG_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': 함수 (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; }}; // removeByzzy20160909 : 수동으로 스타일 파일을 소개 //dialogmanager.loadstyle ();자, 위는 핵심 논리 및 코드 구현입니다. 이 코드는 전체 프로세스를 잘 설명하며 텍스트를 낭비 할 필요가 없습니다. 하위 형식을 여기에 게시하겠습니다.
<tyle> .btn {마진 : 10px 5px; 너비 : 100px; }. > <p> 여기에 표시된 내용은 형식 또는 비 형식 일 수 있습니다. <입력 유형 = "hidden"name = "ret_url"value = "{$ ret_url}"/> </p> <입력 유형 = "제출"value = "완료"/> </div> </form>마지막으로, 다른 렌더링을 게시하겠습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.