Jquery can directly implement the beautiful pop-up layer, and there are also a large number of jquery plug-ins that can implement the pop-up layer effect. For example, easyDialog is a very optimized pop-up layer plug-in.
I. jquery-based pop-up layer instances
First look at the instance
| The Code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Body> <Div class = "shadow" id = "p_shadow"> </div> |
|
Analyze the above instance
In fact, this effect is widely used at present, and it is also a Cool interactive effect, similar to the inquiry box that pops up when vista executes some files requiring higher permissions. As for the technical points, the basic HTML structure is very simple, that is, two divs.
| The Code is as follows: | Copy code |
<Div class = "shadow" id = "p_shadow"> </div> |
|
Theoretically, we only need to set the position of the div whose class is shadow to fixed, top to 0, left to 0, height to 100%, width to 100%, z-index is a large value (ensure that it can be above all elements), with the background color added with the filter effect .?
For popbox class, set z-index to be greater than shadow, position to fixed, top to 50%, left to 50%, fixed width and height, then, margin-left is negative (half of its width), and margin-top is negative (half of its height ).?
| The Code is as follows: | Copy code |
. Shadow {display: none; background: #000000; width: 100%; height: 100%; left: 0; top: 0; filter: alpha (opacity = 40); opacity: 0.4; z-index: 999; position: fixed ;} . Popbox {display: none; z-index: 1001; width: 400px; height: 100px; background: # F7F7F7; border: 1px #999999 solid; position: fixed; top: 50%; left: 50%; margin:-50px 0px 0px-200px ;} |
|
? Paperen I am talking about theory... In fact, it is not that simple, because we have to consider some browsers, such as the hateful ie5 and ie6. Let's write the above theoretical CSS code to see the effect (especially in ie6 )?
Amount ...... It is disappointing, but ie7 and Firefox (FF) and opera have good effects, so I can only say that ie6 is hateful. If the whole world uses ie5, if ie6 is eliminated, it can indeed save a lot of brain cells, but it is obvious that our hope is impossible. At present, ie6 does not seem to be eliminated so quickly, many people still use ie6, and ie6 is still used on paperen's chinanetcenter. This hateful and unavoidable ie6 ......?
Complaints are all complaints. After all, the parsing bugs of CSS in these browsers are all historical problems and it is useless to complain. We still have to find a solution. We want to make our code compatible with all browsers, so let's see what we should do .?
Because ie6 does not support the fixed attribute, we can only use absolute for locating, but also add some expressions. This is also a special attribute, which is actually JavaScript .?
| The Code is as follows: | Copy code |
_ Position: absolute; _ top: expression (eval (document. compatMode & document. compatMode = 'css1compat ')? DocumentElement. scrollTop + (document.doc umentElement. clientHeight-this.offsetHeight)/2: document. body. scrollTop + (document. body. clientHeight-this. clientHeight)/2 ); |
|
Document. body. scrollTop + (document. body. clientHeight-this.clientHeight)/2? In fact, paperen did not know much about it, but he also studied it for a long time. He thought it meant the distance from the slide bar to the top of the slide bar + (the screen height-the height of the div)/2, you can think about this js, that is, to keep the div in the center of the screen. (Of Course You can Google it yourself )?
Paperen I am very excited that ie6 should be okay this time, but why is the shadow not a hundred percent high ......
Alas, it gave me a blow. I checked some information on the Internet and came back to check the code. I thought it was not a problem with the body height. If this div is set to a hundred percent height, should the body be set to a hundred percent height? Adding body {hegiht: 100%;} is really useful. I also found some information to illustrate this problem .?
Whether the height of an object can be displayed in percentage depends on the parent object of the object ,. shadow is directly in the body of the page, so its parent level is body. By default, the browser does not assign a height attribute to the body. when shadow is set to height: 100%, it does not produce any effect, and when we set 100% for the body, its sub-level object. the height of shadow is 100%, which is a highly adaptive problem caused by browser parsing rules. In addition to the body application, the Code also applies the same style design to HTML objects. The advantage of this is that both IE and firefox can be highly adaptive, but the body is not. In addition, the HTML Tag in Firefox is not 100% in height, so the two tags are defined as height: 100%, to ensure that both browsers can be properly displayed .?
That is to say, we need to add the html, body {hegiht: 100%;} sentence. Okay. Finally, this effect is compatible with ie6. It's really not easy ~~?
Finally, I will render the pop box style myself, add some scripts to trigger the pop-up and close events, and add some effects fadeIn and fadeOut with jquery, which will be very good.
Ii. easyDialog pop-up layer of jquery plug-in
1. the default pop-up layer content template is added. For some simple applications, you do not need to write the structure of the pop-up layer content, but only need to pass a few simple parameters. The original usage method is as follows:
| The Code is as follows: | Copy code |
EasyDialog. open ({ |
|
If the default content template is used, the container parameter can be used as follows:
| The Code is as follows: | Copy code |
| EasyDialog. open ({ Container :{ Header: 'pop-up layer title ', Content: 'Welcome to easyDialog :)', YesFn: btnFn, NoFn: true } }); |
|
Shows the effect:
If you want to modify the external content template, you can modify the easydialog.css file in the downloaded document to implement the style you want.
2. added the drag-and-drop effect to make the pop-up layer have a better user experience, and the custom pop-up layer content can also easily implement the drag-and-drop effect.
3. the cache system and micro-event processing system are added internally, and the pop-up layer content is also cached to improve the performance of the pop-up layer.
In addition, the name of a parameter is modified. The original isOverlay is changed to overlay, And the IDs of the elements in the original pop-up layer are also renamed to avoid conflicts.
Of course, the above is just the tip of the iceberg. The effects of various pop-up layers can be found on the Internet. I don't want to introduce them one by one. I think everything is good.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
