ホームページ >ウェブフロントエンド >jsチュートリアル >マスクlayer_javascriptスキルを介してフローティングレイヤーDIVログインを実装するjsコード
マスクlayer_javascriptスキルを介してフローティングレイヤーDIVログインを実装するjsコード
- WBOYオリジナル
- 2016-05-16 17:01:201097ブラウズ
これについてはもう言うことはありません。 。コードに行くだけです！ ！
最初は HTML コードです。これには、ログイン クリック ボタンとシンプルなログイン ボックスが含まれています。
コードをコピーします コードは次のとおりです。
>< div id="shade">
何も機能しません。 。 。
何も機能しません。 。 。
何も機能しません。 。 。
何も機能しません。 。 。
;
< ;br/>gt;
gt;
gt;
gt;
gt;
gt;
gt;
gt;
gt;
br/>gt;
gt;
gt;
gt;
gt;
gt;
gt;
次に、JS スクリプト コードの実装です
コードをコピーします
コードは次のとおりです。 >var shadeHeight = document.body.clientHeight 30;
var shade = document.getElementById("shade");
shade.style.width = shadeWidth "px"; "px" ; shade.style.display = "ブロック"; var loginDivHeight = 800;ログイン") ; loginDiv.style.width = loginDivWidth "px"; loginDiv.style.height = loginDivHeight "px"; loginDiv.style.top = (document.body.scrollTop document.body .clientHeight / 2
-loginDivHeight / 2) "px"; loginDiv.style.left = (document.body.scrollLeft document.body.clientWidth / 2
-loginDivWidth / 2) "px";
loginDiv.style.display = "ブロック"
}
ここにあるのは、マスク レイヤーとログイン ボックスを表示するコードのみです。隠しコードも非常に簡単で、マスクレイヤー（シェード）のDIVブロックとログインボックス（ログイン）のDIVブロックの表示属性をnoneにするだけで問題ありません。 。
この時点で、マスク層を介してフローティング層 DIV ログインを実現する簡単な機能が実装されました。作品に関しては皆さんご自身で対応していただきます。
ここでは、皆さんを助ける機能があります。 。ポップアップログインボックスのDIVブロックをスクロールバーと一緒に動かすにはどうすればよいですか? ?
私の実験コードは次のとおりです。
function loginDivCenter (){
loginDiv .style.top = (document.body.scrollTop document.body.clientHeight / 2
-loginDivHeight / 2) "px";
loginDiv.style.left = (document.body.scrollLeft document.body.clientWidth / 2
-loginDivWidth / 2) "px";
}
関数 scall (){
loginDivCenter()
}
window.onscroll= scall;
window.onresize=scall;
しかし、残念ながら失敗しました。 。ネットでいろいろ検索しましたが、要件を満たすものはありませんでした。ほとんどの場合、これは setInterval を設定することで実現されます。これは理想的ではないと思います。 。 。
偉大なる神々の皆様からアドバイスをお願いします！
-loginDivWidth / 2) "px";
loginDiv.style.display = "ブロック"
}
ここにあるのは、マスク レイヤーとログイン ボックスを表示するコードのみです。隠しコードも非常に簡単で、マスクレイヤー（シェード）のDIVブロックとログインボックス（ログイン）のDIVブロックの表示属性をnoneにするだけで問題ありません。 。
この時点で、マスク層を介してフローティング層 DIV ログインを実現する簡単な機能が実装されました。作品に関しては皆さんご自身で対応していただきます。
ここでは、皆さんを助ける機能があります。 。ポップアップログインボックスのDIVブロックをスクロールバーと一緒に動かすにはどうすればよいですか? ?
私の実験コードは次のとおりです。
コードをコピー コードは次のとおりです。
function loginDivCenter (){
loginDiv .style.top = (document.body.scrollTop document.body.clientHeight / 2
-loginDivHeight / 2) "px";
loginDiv.style.left = (document.body.scrollLeft document.body.clientWidth / 2
-loginDivWidth / 2) "px";
}
関数 scall (){
loginDivCenter()
}
window.onscroll= scall;
window.onresize=scall;
偉大なる神々の皆様からアドバイスをお願いします！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。