DIVポップアップを使用してコンテンツを動的に表示する原則：まず、CSSとHTMLを使用してポップアップのコンテンツを非表示にし、JavaScript（このチュートリアルのjquery）を使用して動的に表示します。この効果は、限られたレイアウトスペースを最大限に活用するだけでなく、ユーザーエクスペリエンスを改善します。さらに重要なことは、SEO効果に影響を与えないことです（実際にページに存在するが、最初は見えないため）
1. HTMLページでDivを定義し、Divに表示する必要があるものを実装します。
コードコピーは次のとおりです。
<body>
<div id = "login">
<h2> <img src = "images/close.png"/> website login </h2>
<form id = "loginform">
<div> </div>
<div>アカウント：<入力タイプ= "Text" name = "user" /> < /div>
<div>パスワード：<入力タイプ= "パスワード" name = "pass" /> < /div>
<div> <入力タイプ= "ボタン" name = "sub" value = "" /> < /div>
</form>
<div>新しいユーザーを登録|パスワードをお忘れですか？ </div>
</div>
</body>
1つの写真は千の言葉の価値があります。このDivポップアップウィンドウの効果のスクリーンショットを見てみましょう。
2。私が使用するCSSスタイル
コードコピーは次のとおりです。
＃ログイン {
幅：350px;
高さ：250px;
ボーダー：1pxソリッド#ccc;
位置：絶対;
表示：ブロック;
Z-Index：9999;
背景：#fff;
}
#Login H2 {
高さ：40px;
Line-Height：40px;
テキストアライグ：センター;
フォントサイズ：14px;
レター間隔：1px;
色：＃666;
背景：url（images/login_header.png）Repree-X;
マージン：0;
パディング：0;
ボーダーボトム：1px solid #ccc;
カーソル：移動;
}
#Login H2IMG {
フロート：そうです;
位置：相対;
トップ：14px;
右：8px;
カーソル：ポインター;
}
#login div.info {
パディング：10px 0 5px 0;
テキストアライグ：センター;
色：マルーン;
}
#login div.user、#login div.pass {
フォントサイズ：14px;
色：＃666;
パディング：5px 0;
テキストアライグ：センター;
}
#login input.text {
幅：200px;
高さ：25px;
ボーダー：1pxソリッド#ccc;
背景：#fff;
フォントサイズ：14px;
}
#login .button {
テキストアライグ：センター;
パディング：15px 0;
}
#login input.submit {
幅：107px;
高さ：30px;
背景：url（images/login_button.png）no-repeat;
国境：なし;
カーソル：ポインター;
}
#login .other {
テキストアライグ：右;
パディング：15px 10px;
色：＃666;
}
ここで注意すべき主なことは、DIVスタイルの定義です。センター表示する必要があるため、絶対的な位置決め位置：Absoluteを使用します。第二に、それはポップアップ層であるため、divは最も外側の周辺にある必要があるため、通常はz-indexが非常に大きく設定されている必要があります。ここでは、z-index：9999に設定します。別のポイントは、DIV自体が隠されており、表示するように設定する必要があることです。なしでは、ここでは効果を直接見る必要があるため、表示：ブロックを使用して直接表示できます。
3.中央に表示する必要があるため、最初にブラウザの高さと幅を取得する必要があります。スクロールバーの水平または垂直のオフセットがある場合は、長さを取得し、計算を通じてブラウザのDIVの位置を取得する必要があります。
コードコピーは次のとおりです。
$（document）.ready（function（）
{
jquery.fn.extend（{
センター：関数（幅、高さ）
{
return $（this）.css（ "left"、（$（window）.width（） - width）/2+$（window）.scrollleft（））。
css（ "top"、（$（window）.height（） - height）/2+$（window）.scrolltop（））。
CSS（「幅」、幅）。
CSS（「高さ」、高さ）;
}
}）;
}）;
ボタンをクリックして表示します
コードコピーは次のとおりです。
$（ "。login"）。クリック（function（）
{
$（ "＃login"）。show（）。センター（350,250）; //ログインボックスを表示します
}）;
複製図
4。ポップアップフレームをドラッグアンドドロップできます
コード実装
コードコピーは次のとおりです。
$（document）.ready（function（）
{
jquery.fn.extend（{
//機能をドラッグアンドドロップします
ドラッグ：function（）{
var $ tar = $（this）;
return $（this）.usedown（function（e）{
if（e.target.tagname == "h2"）{
var diffx = e.clientx -$ tar.offset（）。左;
var diffy = e.clienty -$ tar.offset（）。top;
$（document）.MouseMove（function（e）{
var left = e.clientx -diffx;
var top = e.clienty- diffy;
if（左<0）{
左= 0;
}
else if（left <= $（window）.scrollleft（））{
左= $（window）.scrollleft（）;
}
else if（left> $（window）.width（） +$（window）.scrollleft（） - $ tar.width（））{
left = $（window）.width（） +$（window）.scrollleft（） - $ tar.width（）;
}
if（top <0）{
TOP = 0;
}
else if（top <= $（window）.scrolltop（））{
top = $（window）.scrolltop（）;
}
else if（top> $（window）.height（） +$（window）.scrolltop（） - $ tar.height（））{
top = $（window）.height（） +$（window）.scrolltop（） - $ tar.height（）;
}
$ tar.css（ "left"、left + 'px'）。css（ "top"、top + 'px'）;
}）;
}
$（document）.mouseup（function（）{
$（this）.unbind（ "mousemove"）;
$（this）.unbind（ "mouseup"）
}）;
}）;
}
}）;
}）;
ここでは、DivコンテンツのH2要素をクリックしてドラッグするだけです。グローバルDIVが必要な場合は、変更できます。ドラッグの原理：マウスが指定された要素を押すと、マウスポイントの座標を取得し、計算により、画像も対応する位置に移動します。マウスがクリックしてキャンセルすると、対応するプレスイベントがキャンセルされ、ページはまだあります。
ドラッグメソッドを呼び出します
コードコピーは次のとおりです。
$（ "＃login"）。drag（）;
これで、ポップアップボックスのタイトルバーをクリックして、自由にブラウザにドラッグできます。