AlertBox ポップアップレイヤー情報プロンプトボックス効果の実装手順

AlertBox ポップアップレイヤー情報プロンプトボックス効果の実装手順_JavaScript スキル

WBOY

リリース： 2016-05-16 18:18:50

オリジナル

1213 人が閲覧しました

模倣ライトボックス効果では、この効果は基本的に実現されており、今回は主に IE6 のジッター問題が修正された際に改善されました。
また、IE6対応のための修正メソッドの追加、オーバーレイの再パッケージ化、プログラムのコンポーネント構造への変更が行われました。
互換性: ie6/7/8、firefox 3.6.8、opera 10.6、safari 5.0.1、chrome 5.0

エフェクトプレビューhttp://demo.jb51.net/js/ AlertBox /index.htm

手順の説明

【実施原理】

ポップアップレイヤーの基本原理は、模倣ライトボックス効果ですでに説明しました。
重要な点は位置決めです。一般に、ドキュメントの相対的な位置決めには絶対で十分です。
画面とともに移動する、つまりウィンドウを基準にして位置を移動するには、固定位置を使用します。
これらは、固定 IE6 がサポートされていないことを除けば、実装が非常に簡単です。

【ie6対応修正】

IE6 自体は固定位置をサポートしていないため、シミュレーションまたはトリックを通じて間接的にのみ実装できます。
最も独創的な方法は、ウィンドウのスクロールイベント内でポップアップレイヤーの位置を継続的に修正することです。
後に誰かが、リフローによって「奇妙なことに」達成できることを発見しました。
ただし、上記の方法には欠点があり、スクロールするとポップアップレイヤーが「揺れ」、非常に不快になります (イージングなどを使用することで改善できます)。

揺れを避けたい場合は、HTML と CSS を上手に適用することで実現できます。詳細については、14px の紹介を参照してください。
基本は、コンテナを使用してボディを置き換え、その後、動かないボディを絶対に配置することです。
完璧に見えますが、このメソッドには HTML 構造を変更する必要があり、ウィンドウのスクロールイベントなどの関連するものに影響を与える可能性があります。

プログラムでは別の方法が使用されており、背景とボディの表現によって実現されています。以下は互換性のある固定効果です:

コードをコピーコードは次のとおりです:

🎜>body {
_background: url(about:blank) 固定;
.fixable {
top:100px; >_top:expression(( document).documentElement.scrollTop 100);
}

;
< div class="fixable">fixable

これはより完璧ですが、ボディの背景が固定しかできないことや、エクスプレッションを使用すると比較的大きなリソースを消費することなど、いくつかの問題もあります。
さらに大きな問題は、パーセンテージ値や右/下を使用して配置できないことです。
この問題を解決するために、プログラムは位置決めレイヤーを使用して、一般的な位置決め方法と同じサイズで位置を固定します。このレイヤーを基準にして配置するために使用すると、相対的なウィンドウ配置の効果を実現できます。

互換性のあるプログラムは主に RepairFixed オブジェクトにあります。まず本体の背景を設定します。