Simple pop-up drag window (ii)

Next to the Simple popup drag window (i)

Here's a detailed analysis of the Code section:

First we confirm the following structure:

Hover window: initial not visible. Includes the title bar and the content bar, with a caption and a close button in the title bar.

Matte layer: initially invisible. Used to set the translucent background for pop-up hover windows,

Button: Used to click the Pop-up hover window.

Explained in detail below

1. To allow the window to move freely, the positioning of the window (position) should use absolute positioning (absolute);

/* Log in the floating layer component */

1 . Popup{2 Display:None;/*Initial Hide*/3 width:380px;4 Height:Auto;/*highly liberal, because unsure of how much content. */5 Border:1px solid #D5D5D5;6 background:#fff;/*window content opaque, white background*/    7 Box-shadow:0 0 3px rgba (0, 0, 0, 0.25);8 -moz-box-shadow:0 0 3px rgba (0, 0, 0, 0.25);9 -webkit-box-shadow:0 0 3px rgba (0, 0, 0, 0.25);/*Content window with shading*/Ten Border-radius:8px;/*all corners use rounded corners with a radius of 8px, this property is CSS3 standard property*/  One -moz-border-radius:8px;/*Mozilla browser's private properties*/  A -webkit-border-radius:8px;/*WebKit Private properties of the browser*/ /*window Fillet*/ - position:Absolute; - Top:100px; the  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 you drag in chrome, the cursor changes to the text cursor, and then you release the mouse button), where you need to set a rounded corner to the upper-left corner of the title bar and the upper-right corner.

/* title bar area */

1 . Popup_title{2 Height:48px;3 Line-height:48px;/*Align vertically*/4 padding:0px 20px;/*a distance from the left*/               5 background:#f5f5f5;/*Background Color*/6 Border-bottom:1px solid #efefef;/*Bottom Border*/7 Border-radius:8px 8px 0 0;/*A rounded corner with a radius of 5px is used in the upper- left and upper-right corners, and this property is CSS3 standard property*/ 8 -moz-border-radius:8px 8px 0 0;/*Mozilla browser's private properties*/ 9 -webkit-border-radius:8px 8px 0 0;/*WebKit Private properties of the browser*/ /*window Fillet*/Ten Color:#535353; One font-size:16px;/*font color and font size*/ A cursor:Move;/*movable Style*/ - -moz-user-select:None;/*Firefox All*/ - -webkit-user-select:None;/*Chrome All/safari all/opera15+*/   the -ms-user-select:None;/*IE10*/ - -khtml-user-select:None;/*Early Browser*/ - User-select:None; - -o-user-select:None;/*The above two properties are not currently supported and are written here in order to mitigate the risk*/     +}

Here are a few knowledge points to understand:

1. CSS3 (border-radius) border rounded corners

Border-radius is an abbreviated method. In addition, the four values are in accordance with top-left,top-right,bottom-right, Bottom-left The order in which they are set will mainly occur in the following situations:

2. There is only one value, then Top-left , Top-right , Bottom-right , Bottom-left four values are equal.
4. There are two values, then Top-left equals Bottom-right , and takes the first value; Top-right equals Bottom-left , and take a second value
6. There are three values, where the first value is set Top-left; and the second value is Top-right and the Bottom-left and they will be equal , The third value is a set Bottom-right .
8. There are four values, where the first value is set Top-left and the second value is Top-right a third value Bottom-right The fourth value is a set Bottom-left .

Supported Browsers:

If you still do not understand, here are two articles to refer to. One is Ruan Yi Feng's CSS3 rounded Corners , another is w3cplus CSS3 fillet border-radius, if you can read and understand the two articles, then basically CSS3 fillet border-radius knowledge you have almost mastered.

2. cursor:move

cursor property specifies the type of pointer (cursor) that is displayed.

Property value is Move , the object that this cursor refers to is movable, usually a cross-arrow.

3.user-select : optional to control the content

auto--default value, the user can select the contents of the element

none--user cannot select anything in an element

text--user can select text in an element

element-- text is optional, but only within the bounds of the element ( IE and FF only support )

Note that: User-select is not a CSS standard property, browser support is not complete, you need to adjust each type of browser

User-select Description:

Sets or retrieves whether the user is allowed to select text.

(1) Ie6-9 does not support this property, but it supports the onselectstart="return false;" effect of using tag properties user-select:none ; Safari and Chrome also support this tag property;

(2) Until Opera12.5 still does not support this property, but like Ie6-9, it also supports the use of private unselectable="on" label properties to achieve user-select:none the effect;

(3) Another value of unselectable is off; in other browsers, in addition to Chrome and Safari, if the text is set to -ms-user-select:none; , the user will not be able to start selecting text in that block of text.

However, if the user starts selecting text in other areas of the page, the user can still choose to set the text to-ms-user-select:none; The area text.

Analyze the following code (note: This code and the results of this code analysis are from W3HELP):

1 <!DOCTYPE HTML>2 <HTML>3 <Body>4         <Divunselectable= "On"style= "background: #CCC;" >Unselectable=on</Div>5         <BR/>6         <Divstyle= "background: #CCC;-webkit-user-select:none;" >-webkit-user-select:none;</Div>7         <BR/>8         <Divstyle= "background: #CCC;-moz-user-select:none;" >-moz-user-select:none;</Div>9         <BR/>Ten         <Divstyle= "background: #CCC;"onselectstart= "return false;" >Onselectstart= "return false;"</Div> One </Body> A </HTML>        

The effects in each browser are as follows:

Note 1: You can disable Content selection.

NOTE 2: No content is checked.

As you can see, the option to disallow Content selection is as follows:

IE give the label unselectable= "on", set the label method onselectstart= "return false;"

Firefox sets the private style-moz-user-select:none for the tag.

Chrome Safari sets private style-webkit-user-select:none for tags, sets the label method onselectstart= "return false;".

Opera sets unselectable= "on" for tags

Solution Solutions

Set the style-moz-user-select:none for the label,-webkit-user-select:none the label setting unselectable= "on" to ensure that the contents of the browser can be disabled.

Note: This article is original, reproduced please link to the form marked this article address, thank you for your cooperation.

This address: http://www.cnblogs.com/wanghuih/p/5576910.html

Simple pop-up drag window (ii)