上記のJavaScriptを使用して、学習用のポップアップドラッグウィンドウ（i）の簡単な実装を続けます。
以下は、コードの特定の分析です。
まず、構造を確認しましょう。
フローティングウィンドウ：最初は見えません。タイトルバーとコンテンツバーが含まれており、タイトルバーとタイトルバー内に近いボタンがあります。
マスクレイヤー：最初は見えません。フローティングウィンドウがポップアップするときに半透明の背景を設定するために使用されます。
ボタン：クリックしてフローティングウィンドウをポップアップします。
以下に詳細に説明します
1。ウィンドウを自由に移動できるようにするには、ウィンドウの位置は絶対的でなければなりません。
/*フローティングレイヤーコンポーネントをログインする*/。ポップアップ{表示：なし; /*初期隠れ*/幅：380px;高さ：自動; /*高い自由、それは不確かであるため、コンテンツの量。 */ border：1px solid＃d5d5d5;背景：#ffff; /*ウィンドウの内容は不透明で、背景は白です*/ 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）; /*コンテンツウィンドウに影が付けられています*/ border-radius：8px; /*すべてのコーナーは、半径8pxの丸い角を使用しています。このプロパティはCSS3標準プロパティです*/ -moz-border-radius：8px; /* Mozilla Browserのプライベート属性*/ -Webkit-Border-Radius：8px; /* webkitブラウザのプライベート属性*//*ウィンドウラウンドコーナー*/位置：絶対;トップ：100px;左：100px; /*絶対位置決め*/ z-index：9000; }2。タイトルバーをウィンドウに追加し、タイトルバーのマウスカーソルをドラッグ（移動）形状に設定します（Chromeをドラッグすると、カーソルがテキストカーソルになり、マウスボタンをリリースした後に復元されます）。ここでは、タイトルバーの左上と右上の角に丸い角を設定する必要があります。
/*タイトルバー領域*/。popup_title{height：48px;ラインハイト：48px; /*垂直にセンター*/パディング：0px 20px; /*左から一定の距離を作成*/背景：＃f5f5f5; /*背景色*/ border-bottom：1px solid #efefefef; /*ボトムボーダー*/境界線 - ラジウス：8px 8px 0 0; /*左上と右上隅に半径が5pxの丸い角を使用します。このプロパティは、CSS3標準プロパティ*/ -Moz-Border-Radius：8px 8px 0 0です。 /* Mozilla Browserの私有財産*/ -Webkit-Border-Radius：8px 8px 0 0; /* webkitブラウザの私的プロパティ*//*ウィンドウの丸い角*/色：＃535353;フォントサイズ：16px; /*フォントの色とフォントサイズ*/カーソル：移動; /* 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; /*上記の2つの属性は現在サポートされていないため、リスクを減らすためにここに書きました*/}ここに理解するためのいくつかの知識ポイントがあります：
1。CSS3（国境帯）境界丸い角
Border-Radiusは略語方法です。さらに、4つの値は、左上、右上、下部右、下左、下左の順に設定されます。主な状況は、次の状況で発生します。
1.値が1つしかない場合、左上、右上、下部右、および下左の4つの値は等しくなります。
2。2つの値があり、その後、左上左が右下に等しく、最初の値が取られます。右上は左下に等しく、2番目の値が取られます
3. 3つの値があり、最初の値は左上を設定することです。 2番目の値は右上および下部左であり、それらは等しく、3番目の値は右下に設定することです。
4. 4つの値があります。最初の値は左上を設定することであり、2番目の値は最高右、3番目の値は底右に、4番目の値は左下を設定することです。
サポートされているブラウザ：
2。カーソル：移動
カーソルプロパティは、表示されるポインター（カーソル）のタイプを指定します。
プロパティ値が移動している場合、このカーソルによって言及されるオブジェクトは、図に示すように、通常は交差矢印である移動可能であることを意味します。
3.ユーザーセレクト：コンテンツの選択性を制御するために使用されます
Auto-Default値、ユーザーは要素内のコンテンツを選択できます
なし - ユーザーは要素内のコンテンツを選択できません
テキスト - ユーザーは要素内のテキストを選択できます
要素 - テキストはオプションですが、要素の境界内のみ（IEとFFによってのみサポートされています）
ユーザーセレクトはW3C CSS標準属性ではなく、ブラウザはそれを不完全にサポートし、各ブラウザーに対して調整する必要があることに注意してください。
ユーザー選択の説明：
ユーザーがテキストを選択できるかどうかを設定または取得します。
（1）IE6-9はこのプロパティをサポートしていませんが、SelectStart = "return false;" onselectstart = "return false;"のタグ属性の使用をサポートしています。ユーザー選択の効果を達成するには：なし; SafariとChromeは、このタグ属性もサポートしています。
（2）このプロパティはOpera12.5までサポートされていませんが、IE6-9と同様に、ユーザー選択の効果を実現するために、private tag属性の使用の使用をサポートしています。
（3）選択不可能の別の値はオフです。他のブラウザでは、テキストが-ms-user-rectに設定されている場合：なし;他のブラウザでは、ユーザーはテキストブロックでテキストの選択を開始できません。
ただし、ユーザーがページの他の領域でテキストの選択を開始した場合、ユーザーはテキストを-ms-user-selectに設定する領域テキストを選択し続けることができます。
次のコードを分析します（注：このコードとこのコードの分析結果はW3HELPからのものです）。
<！doctype html> <html> <body> <div unselectable = "on" style = "background：#cc;" > selectable = 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>
各ブラウザの効果は次のとおりです。
注1：コンテンツを無効にすることができます。
注2：選択するコンテンツは禁止されていません。
コンテンツの選択を禁止する方法は次のとおりであることがわかります。
IEはタグに対してunselectable = "on"を設定し、タグメソッドをonselectstart = "return false;"に設定します。 "
Firefoxは、タグのプライベートスタイルを設定-Moz-User-Select：なし。
Chrome Safariは、タグ-Webkit-User-Select：noneのプライベートスタイルを設定し、selectstart = "return false;"でタグメソッドを設定します。
Opera Set UnSelectable = "on" for tags
解決
ラベルのスタイルを設定-Moz-User-Select：none; -webkit-user-select：none none set unselectable = "on"を設定して、すべてのブラウザーがコンテンツの選択を禁止できるようにします。
ケースのフローティング差分ポップアップウィンドウのタイトルバーに禁止された選択スタイルを設定すると、次のように設定できます。
<div id = "popup_title" unselectable = "on"> login <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; /*上記の2つの属性は現在サポートされていません。ここではリスクを減らすために書かれています*/}注：この記事はオリジナルです。アドレス：http：//www.cnblogs.com/wanghuih/p/5576910.html
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。