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();
これで、ポップアップボックスのタイトルバーをクリックして、自由にブラウザにドラッグできます。