The original plan was to achieve such a requirement: the front desk click triggers a business action, and the user needs to supplement information, without jumping the page, and supplement information in the form of pop-up windows. It was troubled, but it was not used in the end.
The code is still a bit frizzy and provides rough implementation logic.
Implementation idea: lay a mask on the window to block the original window function button, and realize pop-up windows at absolute positioning on the upper layer of the mask. The data interaction in the pop-up window is ajax method. Use onclick to start pop-up event.
Key details: The pop-up window and the original form are essentially the same page. For the convenience of description, let’s call the bottom form the parent form and the pop-up window the child form. In order to achieve the interaction of the parent form, you need to make some special labels in the parent form so that the selector can select and insert a new dom object.
In this way, first look at the code of the parent form. I have comments on the key part.
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta 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> <script charset="utf-8" type="text/javascript" src="script/jquery/jquery.ui.js"></script> <link rel="stylesheet" type="text/css" href="script/jquery/themes/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.css" rel="stylesheet" type="text/css"> <style type="text/css"> *{ margin: 0; padding: 0; text-align: center; text-decoration: none; } body{ font: 12px/1.5 Songyi, Tahoma, Arial,sans-serif; font-family: "Microsoft Yahei"; width:320px; height: auto; margin:0 auto; } .content{ border: #ccc solid 1px; margin:60px 10px 10px; background:#fff; overflow:hidden; color:#6b6b6b; font-size:14px; border-radius:5px; } </style> </head><body> <!-- The selector is selected by 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" > Dialogue Test</a> </div> </body></html>Then give the selector part of the code, that is, the code of outil.js. Of course, I won’t talk about the previous jquery and jquery ui. At its core, it is bound to click events.
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]) return decodeURIComponent(aCrumb[1]); } return ''; }, setCookie : function(sName, sValue, sExpires) { var sCookie = sName + "=" + encodeURIComponent(sValue); if (sExpires != null) sCookie += "; expires=" + sExpires; document.cookie = sCookie; }, removeCookie : function(sName) { document.cookie = sName + "=; 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') ? $(this).attr('dialog_title') : ''; var url = $(this).attr('uri'); var width = $(this).attr('dialog_width'); ajax_form(id, title, url, width); return false; });});function drop_confirm(msg, url){ if(confirm(msg)){ window.location = url; }}/* Show Ajax form*/function ajax_form(id, title, url, width){ if (!width) { width = 400; } var d = DialogManager.create(id); d.setTitle(title); d.setContents('ajax', url); d.setWidth(width); d.show('center'); return d;}function go(url){ window.location = url;}function set_zindex(parents, index){ $.each(parents,function(i,n){ if($(n).css('position') == 'relative'){//alert('relative'); //alert($(n).css('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>'); $('#warning').show();}function check_pint(v){ var regu = /^[0-9]{1,}$/; if(!regu.test(v)) { alert(lang.only_int); return false; } return true;}/* Convert & */function transform_char(str){ if(str.indexOf('&')) { str = str.replace(/&/g, "%26"); } return str;}// Copy to clipboard function 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) { return false; } var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); if (!clip) return false; var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); if (!trans) return false; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); var copyright = 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); }}The relevant code for binding events is the core code of dialog (dialog.js). This was found online. Thank you here. The code is as follows:
__DIALOG_WRAPPER__ = {};/* There is a bug in IE6. If the width of the dialog box is not given, the dialog box will be displayed with 100% width in IE6*/DialogManager = { 'create' :function(id){ var d = {}; 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; }, /* 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').after('<link href="' + _dialog_css + '" rel="stylesheet" type="text/css" />'); }};ScreenLocker = { 'style' : { 'position' : 'absolute', 'top' : '0px', 'left' : '0px', 'backgroundColor' : '#000', 'opacity' : 0.5, 'zIndex' : 999 }, 'masker' : null, 'lock' : function(zIndex){ if (this.masker !== null) { this.masker.width($(document).width()).height($(document).height()); return true; } this.masker = $('<div></div>'); /* IE6 Hack */ if ($.browser.msie) { $('select').css('visibility', 'hidden'); } //var _iframe = $('<iframe></iframe>').css({'opacity':0, 'width':'100%', 'height':'100%'}); //this.masker.append(_iframe); /* Style*/ this.masker.css(this.style); if (zIndex) { this.masker.css('zIndex', zIndex); } /* width and height of the entire document*/ this.masker.width($(document).width()).height($(document).height()); $(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'); } }};Dialog = function (id){ /* The constructor generates dialog code and adds it to the document */ this.id = id; this.init();};Dialog.prototype = { /* Unique 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}; /* Create an outer container*/ this.dom.wrapper = $('<div id="dialog_object_' + this.id + '"></div>').get(0); /* Create dialog body*/ this.dom.body = $('<div></div>').get(0); /* Create title bar*/ this.dom.head = $('<h3></h3>').get(0); /* Create title text*/ this.dom.title = $('<span></span>').get(0); /* Create close button*/ //this.dom.close_button = $('<span>close</span>').get(0); /* Create content area*/ this.dom.content = $('<div></div>').get(0); /* Create content area*/ this.dom.content = $('<div></div>').get(0); /* Combination*/ $(this.dom.head).append('<div></div><div></div>').append($('<span></span>').append(this.dom.title)).append(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:both;display:block;"></div>'); /* Initialization style*/ $(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; /* Initialize component event*/ $(this.dom.close_button).click(function(){ DialogManager.close(self.id); }); /* Drag and drop */ $(this.dom.wrapper).draggable({ 'handle' : this.dom.head }); /* Put in document stream*/ $(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); /* Show dialog*/ $(this.dom.wrapper).show(); }, /* Close*/ 'close' : function(){ if (!this.onClose()) { return false; } /* Close dialog*/ $(this.dom.wrapper).remove(); /* Unlock screen*/ ScreenLocker.unlock(); return true; }, /* Dialog title*/ 'setTitle' : function(title){ $(this.dom.title).html(title); }, /* Change the dialog box content*/ '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); } }, /* Set the dialog box style*/ 'setStyle' : function(style){ if (typeof(style) == 'object') { /* Otherwise it is CSS */ $(this.dom.wrapper).css(style); } else { /* If it is a string, it is considered to be the style name */ $(this.dom.wrapper).addClass(style); } }, 'setWidth' : function(width){ this.setStyle({'width' : width + 'px'}); }, 'setHeight' : function(height){ this.setStyle({'height' : height + 'px'}); }, /* Generate dialog content*/ 'createContents' : function(type, options){ var _html = '', self = this, status= 'complete'; if (!options) { /* If there is only one parameter, it is considered to be the HTML string */ this.setStatus(status); return type; } switch(type){ case 'ajax': /* Get HTML through Ajax and display it on the page. This process is asynchronous*/ $.get(options, {ajax:1}, function(data){ if(data.substr(0,1) == '{' && data.substr(data.length - 1, 1) == '}'){ var JSON = eval('(' + data + ')'); if(!JSON.done){ self.setContents(JSON.msg); return; } } self.setContents(data); /* Use the last position to reposition the window position*/ self.setPosition(self.lastPos); //>>addByZZY20160909: Determine whether the window is displayed based on the backend information /* According to the first five digits of the returned content, the value is closed will not be displayed */ if(data.substr(0,5) == 'close'){ self.close(); } }); /* First prompt that it is loading */ _html = this.createContents('loading', {'text' : 'loading...'}); break; /* The following are several built-in dialog types*/ case 'loading': _html = '<div><div>' + options.text + '</div></div>'; status = 'loading'; break; case 'message': var type = 'Notice'; if (options.type) { type = options.type; } _message_body = $('<div></div>'); _message_contents = $('<div>' + options.text + '</div>'); _buttons_bar = $('<div></div>'); switch (type){ case 'Notice': case 'warning': var button_name = lang.confirm; if (options.button_name) { button_name = options.button_name; } _ok_button = $('<input type="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); break; case 'confirm': 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); break; } _html = $(_message_body).append(_message_contents).append(_buttons_bar); break; } 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(); /* left=width of the scrollbar + (the current viewing area - the width of the dialog box) / 2 */ left = $(window).scrollLeft() + ($(window).width() - dialog_width) / 2; /* top = height of the scrollbar + (the current viewing area - the height of the dialog box) / 2 */ top = $(window).scrollTop() + ($(window).height() - dialog_height) / 2; $(this.dom.wrapper).css({left:left + 'px', top:top + 'px'}); break; } } 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); return false; }; }, 'enableClose' : function(){ this.onClose = this.tmp['oldOnClose']; this.tmp['oldOnClose'] = null; }};//RemoveByZZY20160909: Manually introduce style file //DialogManager.loadStyle();OK, the above is the core logic and code implementation. The code explains the entire process well, and there is no need to waste text. I'll post the sub-form here.
<style> .btn{ margin:10px 5px; width: 100px; }</style> <form method="post" action="{$MyAction}" id="popupform"> <div style="margin-top:10px;" > <p> The content displayed here can be a form or a non-form. <input type="hidden" name="ret_url" value="{$ret_url}" /> </p> <input type="submit" value="complete" /> </div> </form>Finally, I will post another rendering.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.