Front-End Pop-up dialog JS implementation Ajax Interactive _javascript skills

Originally planned to achieve such a demand: The front click to trigger a business action, users need to add information, do not make jump page, the form of the window to supplement information. Toss it out, but in the end it didn't work.

The code is also somewhat edgy, providing a general logic for implementation.

implementation of the idea: in the window of the mask to shield the original Window function button operation, the upper layer of the mask absolute positioning to achieve the window, the pop-up window of the data interaction using AJAX way. The starting window event with onclick.

key details: the window and the original form is the same page, in order to describe the convenience, let's say the underlying form is the parent form, the window is a subform. To implement the interaction of the word parent form, you need to make a special label in the parent form so that the selector chooses and inserts a new DOM object.

So, first look at the code for the parent form, and I have a comment on the key part.

The

then gives the selector part of the code, which is the Outil.js code, and of course the jquery and jquery UI are not mentioned. Its core is the binding click event.

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, 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 class= ' error ' > ' + 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; }/* Transform JS jump in the & */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 copytext = 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 related code for the

Binding event is dialog's core code (DIALOG.JS), which was found online, thanks to the code as follows:  

__dialog_wrapper__ = {};
  /* IE6 There is a bug, if not given the width of the dialog box, under IE6, the dialog box will be displayed with 100% width/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). Widt

   H ()). 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/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) {/* constructor generates dialog code and adds it to the document * * this.id = ID;
This.init ();
}; DIalog.prototype = {*/* Unique ID */' ID ': null,/* Document Object/' DOM ': null, ' Lastpos ': null, ' status ': ' Complete ',
 ' OnClose ': function () {return true; }, ' tmp ': {},/* initialization/' init ': function () {this.dom = {' wrapper ': null, ' body ': null, ' head ': null, ' title ': nul

  L, ' Close_button ': null, ' content ': null}; /* Create outer container/This.dom.wrapper = $ (' <div id= ' dialog_object_ ' + this.id + ' "class= ' dialog_wrapper ' ></div> ').

  Get (0);

  /* Create Dialog Body * * this.dom.body = $ (' <div class= ' dialog_body ' ></div> '). Get (0);

  /* Create title bar/This.dom.head = $ (' 
 

Well, the above is the core logic and code implementation, the code is a good explanation of the whole process, there is no need to waste words. I'm going to post this inside of the handle form.

<style>
 btn{
  margin:10px 5px;
  width:100px;
 }
</style>
 <form method= "POST" action= "{$MyAction}" id= "Popupform" >
 <div class= "content" style = "margin-top:10px" > 
 <p>
  The content shown here can be either form or non-form.
  <input type= "hidden" name= "Ret_url" value= "{$ret _url}"/> 
  </p>
  <input type= "Submit" class= "BTN" value= "complete"/>
 </div>
 </form>

Finally, put a picture of the effect.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.