Implementation page dialog box

The task assigned by the permission system is: the split column and the page pop-up box. It is not difficult to feel the two tasks at first, as we mentioned in the jQuery video, so I found my own example and completed it. It is really easy to split the column, so let's talk about the page pop-up box.

If you don't think much about it at first, you can simply complete the pop-up box you need based on the instance (to achieve the effect: click the button in the middle of the page to pop up the box, in addition, the pop-up box can change the location based on the browser size, always in the middle of the page)

Html:

 Window display-Chen Lina
 <Script type = "text/javascript" src = 'js/jquery. js '> </script> <script type = "text/javascript" src = 'js/window-2.js'> </script>       
           
Add Module
 
 
                                
  
  
 
   
 
    
Module name:
 
    
 
   
 
   
 
    
Module:
 
    
  Select  
 
   
 
   
 
    
English logo:
 
    
  
 
   
 
   
 
    
Order Number:
 
    
 
   
 
   
 
    
Associated Organizations:
 
    
  Select  
 
   
 
   
 
    
Type:
 
    
  Select  
 
   
 
   
 
    
Description:
 
    
  
 
   
 
   
 
    
    
 
   
 
  
 
 

Css:

. Window {background-color: #99 FFCC; width: pixel PX; margin: 5px; padding: 2px;/* absolute position */position: absolute; left: 277px; top: 491px; display: none ;}. content {height: 360px; background-color: # FFFFFF; border: 2px solid #99 FFCC;/* scroll bar display */overflow: auto; clear: both ;}. title img {float: right; cursor: pointer ;}. title {padding: 2px ;}

Js:

// JavaScript Document $ (document ). ready (function () {// 1 click the button and a window is displayed in the middle of the screen. // 2 click the button. 2. A window is displayed in the lower left corner of the screen. // 3 after the page is loaded, a window is floated in the lower right corner of the screen, and the window fades out slowly // click the close button to close the form/* $ (". title img "). click (function () {$ (this ). parent (). parent (). hide ("slow") ;}); */var centerwin =$ ("# center "). mywin ({left: "center", top: "center"});/* var leftwin = $ ("# left "). mywin ({left: "left", top: "bottom"}, function () {leftwin. slideUp ("slow") ;}); */$ ("# conterpop "). click (fu Nction () {// after clicking the button, display the window with id center in the middle of the page // calculate the left boundary and upper boundary values of the window in the middle of the screen // width and height of the browser's visible area, the width and height of the current window // consider the top, bottom, and left borders of the scroll bar // how to obtain the Boundary Value of the scroll bar centerwin. show ("slow") ;};}); // encapsulate ins $. fn. mywin = function (position, hidefunc) {if (position & position instanceof Object) {var positionleft = position. left; var positiontop = position. top; var windowobj = $ (window); var currentwin = this; var cwinwidth = this. outerWidth (true); var cwinheight = this. OuterHeight (true); var left; var top; var scrollleft; var scrolltop; var browserwidth; var browserheight; // calculate the current region width and height of the browser, and the upper left boundary function getWinDin () {scrollleft = $ (window) of the scroll bar ). scrollLeft (); scrolltop = $ (window ). scrollTop (); browserwidth = $ (window ). width (); browserheight = $ (window ). height () ;}// calculate the true left Boundary Value of the window function calLeft (positionleft, scrollleft, browserwidth, cwinwidth) {if (positionleft & typeof positionleft = "String") {if (positionleft = "center") {left = scrollleft + (browserwidth-cwinwidth)/2;} else if (positionleft = "left ") {left = scrollleft;} else if (positionleft = "right") {left = scrollleft + browserwidth-cwinwidth; }}// cache data currentwin. data ("positionleft", positionleft);} // calculate the real Upper Boundary Value of the window function callTop (positiontop, scrolltop, browserheight, cwinheight) {if (positiontop & typeof positiontop = "string") {if (positiontop = "cente R ") {top = scrolltop + (browserheight-cwinheight)/2;} else if (positiontop =" top ") {top = scrolltop ;} else if (positiontop = "bottom") {top = scrolltop + browserheight-cwinheight ;}// cache data currentwin. data ("positiontop", positiontop);} // function moveWin () {calLeft (currentwin. data ("positionleft"), scrollleft, browserwidth, cwinwidth); callTop (currentwin. data ("positiontop"), scrolltop, browserheight, cwinheight); currentwi N. animate ({left: left, top: top}, 300) ;}// move the position var scrollTimeout of the window when the browser scroll bar is rolled; $ (window ). scroll (function () {clearTimeout (scrollTimeout); scrollTimeout = setTimeout (function () {getWinDin (); moveWin () ;}, 300 );}); // when the browser size changes, move the window position $ (window ). resize (function () {getWinDin (); moveWin () ;}); // close the pop-up box currentwin. children (". title "). children ("img "). click (function () {if (! Hidefunc) {currentwin. hide ("slow") ;}else {hidefunc () ;}margin ("left", left;.css ("top", top); // return the current object, to facilitate cascade execution of other methods return this ;}}

However, this pop-up box is implemented, but the pop-up box cannot move with the mouse. In order to improve user experience, you need to change it, modification Based on the above instance cannot be completed, because the fixed pop-up box is displayed in the middle of the page, so I checked some other methods, one simple method is to use the dialog method encapsulated by jquery ui:

Html: basically the same as the previous html, just change the Class Name of the div:

   JQuery UI Dialog-Default functionality  
 <Script src = "./js/jquery-1.9.1.js"> </script> <script src = "./js/jquery-ui.js"> </script>
 <Script type = "text/javascript"> function dialogOpen () {$ (function () {$ ("# dialog "). dialog () ;}) ;}</script>    Table omitted

You only need to reference the js and css encapsulated by juqery ui to complete the pop-up box. However, this pop-up box is not satisfactory:

Download the skin, because my English is not very good, it seems that I want to learn English well. Another way is to modify the css of jquery ui and check the class name in the title bar in the Code debugging window, you can adjust the background color in jquerycss.

One of the two implementation methods is relatively primitive, which is produced by js. The other is encapsulated. Although the effects of the two methods are too similar, they are similar. In fact, the method in the first step can also be encapsulated into a js, which can be called as needed in the future.

Although it is not difficult, it takes me some time to implement it step by step, but I don't have to worry about it in the future.