Continue with the above JavaScript simple implementation of pop-up drag window (I) for learning.
The following is the specific analysis of the code:
First, let's confirm the structure:
Floating window: Initially invisible. Includes the title bar and content bar, with title bars and close buttons inside the title bar.
Mask layer: Invisible at the beginning. Used to set the translucent background when the floating window pops up.
Button: Used to click to pop up the floating window.
The following will explain in detail
1. To allow the window to move freely, the position of the window should be absolute;
/*Login floating layer component*/.popup{ display:none; /*Initial hiding*/ width: 380px; height: auto; /*High freedom, because it is uncertain, how much content is. */ border: 1px solid #D5D5D5; background: #ffff; /*The window content is opaque, the background is white*/ box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); /*The content window is shadowed*/ border-radius: 8px; /* All corners use rounded corners with a radius of 8px, this property is a CSS3 standard property*/ -moz-border-radius: 8px; /* Private attributes of Mozilla browser*/ -webkit-border-radius:8px; /* Private attributes of Webkit browser*/ /* Window rounded corners*/ position: absolute; top: 100px; left: 100px; /*absolute positioning*/ z-index: 9000; }2. Add a title bar to the window, and set the mouse cursor of the title bar to the drag (move) shape (when dragging in Chrome, the cursor will become a text cursor, and it will be restored after releasing the mouse button). Here you need to set a rounded corner for the upper left and upper right corners of the title bar.
/*Title bar area*/.popup_title{ height: 48px; line-height: 48px; /*Center vertically*/ padding:0px 20px; /*Make a certain distance from the left*/ background: #f5f5f5; /*Background color*/ border-bottom: 1px solid #efefefef; /*Bottom border*/ border-radius:8px 8px 0 0; /* Use rounded corners with radius of 5px in the upper left and upper right corners. This property is a CSS3 standard property*/ -moz-border-radius:8px 8px 0 0; /* Private property of Mozilla browser*/ -webkit-border-radius:8px 8px 0 0; /* Private properties of Webkit browser*/ /* Window rounded corners*/ color: #535353; font-size: 16px; /* Font color and font size*/ cursor: move; /* Movable style*/ -moz-user-select: none; /* Firefox all */ -webkit-user-select: none; /* Chrome all / Safari all /opera15+*/ -ms-user-select: none; /* IE10*/ -khtml-user-select: none; /* Early browsers*/ user-select: none; -o-user-select: none; /* The above two attributes are not currently supported, so I wrote them here to reduce risks*/ }Here are a few knowledge points to understand:
1. css3(border-radius) border rounded corners
border-radius is an abbreviation method. In addition, the four values are set in the order of top-left, top-right, bottom-right, bottom-left, and bottom-left. The main situations will occur in the following situations:
1. If there is only one value, then the four values of top-left, top-right, bottom-right, and bottom-left are equal.
2. There are two values, then top-left is equal to bottom-right, and the first value is taken; top-right is equal to bottom-left, and the second value is taken
3. There are three values, the first value is to set top-left; while the second value is top-right and bottom-left and they will be equal, and the third value is to set bottom-right.
4. There are four values, the first value is to set top-left and the second value is top-right, the third value bottom-right, and the fourth value is to set bottom-left.
Supported browsers:
2. cursor: move
The cursor property specifies the type of pointer (cursor) displayed.
When the property value is move, it means that the object referred to by this cursor is movable, usually a cross arrow, as shown in the figure.
3.user-select: used to control the selectivity of content
auto--default value, the user can select the content in the element
none - User cannot select any content in the element
text--The user can select the text in the element
element - text is optional, but only within the boundaries of the element (only supported by IE and FF)
It should be noted that user-select is not a W3C CSS standard attribute, and the browser supports it incompletely and needs to be adjusted for each browser.
user-select description:
Sets or retrieves whether the user is allowed to select text.
(1) IE6-9 does not support this property, but supports the use of the tag attribute onselectstart="return false;" to achieve the effect of user-select:none; Safari and Chrome also support this tag attribute;
(2) This property is not supported until Opera12.5, but like IE6-9, it also supports the use of the private tag attribute unselectable="on" to achieve the effect of user-select:none;
(3) Another value of unselectable is off; in other browsers, if the text is set to -ms-user-select:none; in other browsers, the user will not be able to start selecting text in the text block.
However, if the user starts selecting text in other areas of the page, the user can still continue to select the area text that sets the text to -ms-user-select:none;.
Analyze the following code (note: this code and the analysis results of this code are from w3help):
<!DOCTYPE html><html><body> <div unselectable="on" style="background:#CC;" >unselectable=on </div> <br/> <div style="background:#CC;-webkit-user-select:none;" >-webkit-user-select:none;</div> <br/> <div style="background:#CC;-moz-user-select:none;" >-moz-user-select:none;</div> <br/> <div style="background:#CC;" onselectstart="return false;" >onselectstart="return false;"</div></body></html>
The effects in each browser are as follows:
Note 1: The content can be disabled.
Note 2: No content is prohibited to be selected.
It can be seen that the method to prohibit content selection is as follows:
IE Set unselectable= "on" for the tag, and set the tag method onselectstart="return false;"
Firefox sets private styles for tags -moz-user-select:none .
Chrome Safari Sets a private style for the tag -webkit-user-select:none , and sets the tag method onselectstart="return false;".
Opera set unselectable= "on" for tags
Solution
Set styles for labels -moz-user-select:none ;-webkit-user-select:none At the same time, set unselectable= "on" to ensure that all browsers can prohibit content selection.
If you set the prohibited selection style to the title bar of the floating difference pop-up window in the case, you can set it like this:
<div id="popup_title" unselectable= "on" > Log in <a href="javascript:hidepopup();"></a></div>
.popup_title{ -moz-user-select: none; /* Firefox all */ -webkit-user-select: none; /* Chrome all / Safari all /opera15+*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /* Early browsers*/ user-select: none; -o-user-select: none; /*The above two attributes are not currently supported, written here to reduce risks*/ }Note: This article is original, address: http://www.cnblogs.com/wanghuih/p/5576910.html
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.