Jquery-based display Form Controls control positions

Based on the display form control opened by jquery, you can set the <div> position in the middle or lower left or lower right corner.

// Display a window at a specified position. It is developed based on jquery and must be imported into the jquery package. It cannot be searched and is everywhere.
/*
* @ Param position if it is a center, it is in the middle of the browser.
If it is rigthDown, it will be in the bottom right corner of the browser.
If it is leftDown, you can sit down in the browser.
If the input is a json object, set the location of the coordinates, for example, {left: 100, top: 100}
*/
$. Fn. myWindows = function (position ){

Var windowobj = $ (window );
Var browserWidth = windowobj. width (); // browser width
Var browserHieght = windowobj. height (); // browser height
Var scrollLeft = windowobj. scrollLeft (); // horizontal position of the scroll bar
Var scrollTop = windowobj. scrollTop (); // the vertical position of the scroll bar
Var selfWidth = this. outerWidth (true); // The width of this element includes magin and padding.
Var selfHeight = this. outerHeight (true); // the height of this element includes magin and padding.

Var left;
Var top;
// Window in the middle
If (position = "center "){
Left = scrollLeft + (browserWidth-selfWidth)/2; // obtain the left distance
Top = scrollTop + (browserHieght-selfHeight)/2; // obtain the distance above
} Else if (position = "rigthDown "){
// Window in the lower right corner
Left = scrollLeft + browserWidth-selfWidth;
Top = scrollTop + browserHieght-selfHeight;
} Else if ("leftDown "){
Left = scrollLeft + 0;
Top = scrollTop + browserHieght-selfHeight;
}
Else if (position & position instanceof Object ){
Left = position. left;
Top = position. top;
}
This.css ("position", "absolute"); // Let this container be absolutely positioned
This.css ("left", left).css ("top", top); // you can specify the position of the element.

Var self = this;
// Find that clsss is the title element under this element. The image click event under this element is hidden in this window.
This. children (". title"). children ("img"). click (function (){
Self. hide ("show ");
});

Return this; // The returned object itself facilitates sequential operations
}

The following method is called:

Html code:

<Div style = "width: 100px; height: 100px; display: none">
<Div class = "title">

This is the title part of the form, and the class must be equal to the title image used to close the window
<Div>
Here is your content
<Div>
<Input type = "button" id = "showDiv" value = "display form" onclick = "showWindows ()">

Javascript code:

<Script>
Function showWindows (){
$ ("# WindwosDiv"). myWindows ("leftDown ");
}
</Script>