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

模倣ライトボックス効果では、この効果は基本的に実現されており、今回は主に 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);
}

;
fixable

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

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



コードをコピーします


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

if (body.currentStyle.backgroundAttachment !== "fixed") { if (body.currentStyle.backgroundImage === "none") { body.runtimeStyle.backgroundRepeat = " no-repeat"; body.runtimeStyle.backgroundImage = "url(about:blank)" } body.runtimeStyle.backgroundAttachment = "fixed";

位置決めレイヤーを再度作成します:




コードをコピーします


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

layer = document.createElement("

");

位置決めレイヤーも「overflow:hidden」に設定する必要があります。利点は、ポップアップ レイヤーが外側にあるため、ドキュメントが自動的に展開されないことです。ドキュメントの元の範囲。 ie6 は次のコードをテストします。ドキュメントは下にスクロールすると展開され続けます:

コードをコピーします

コードは次のとおりです。以下のように:

fixable

加上"overflow:hidden"就可以防止这种情况。

然后弹出层通过append方法修改为"absolute"定位，并插入到这个定位层，这样就能实现fixed效果了。

由于这个定位层比较耗资源，所以在有元素插入时才会插到body中。
在不需要fixed的时候，要用remove方法从定位层中移除，当定位层内没有需要定位元素就会自动从body移除。
ps：隐藏的话expression还会继续执行，要移出文档才行。

【居中效果】

加入居中扩展程序，并且设置center为true，就会自动相对窗口居中。
居中的原理跟仿Lightbox效果是一样的，通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。
要注意的是不是使用fixed定位时，计算需要加上scrollTop/scrollLeft。

【覆盖层】

在仿Lightbox效果中，ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆盖层是由AlertBox扩展而来，它其实就是一个大小跟窗口一样，并且跟窗口重合的弹出层。
由于覆盖层一般只需要定义一个就行了，这里把它做成一个OverLay对象，使用时直接调用它的show和close方法。

【遮盖select】

在仿Lightbox效果中介绍过两种遮盖select的方法：隐藏和iframe。
程序是通过iframe来遮盖的，放在ie6的兼容扩展程序中。
在iframe定位时要注意，要定位到弹出层的负的clientTop/clientLeft，这样才能保证边框不会被遮住。

使用技巧

【定位】

除了居中，程序会按照弹出层本身的定位样式来显示。
不是fixed定位时要注意，在ie6是相对当前窗口来定位的，其他都是相对第一屏窗口来定位的。
还要注意，必须声明DOCTYPE，才能正确定位。
程序为了尽量通用，降低了效率（用了4个expression），所以最好还是根据实际情况自己来调整。
ps：需要像定位提示效果那样预设定位的话，可以自行扩展。

【锁定键盘】

使用覆盖层时，为了防止用户通过键盘操作页面，可以在document的keydown中执行preventDefault来禁用。
如果弹出层需要正常操作，只要在弹出层的keydown中执行stopPropagation就行了。

【拖动弹窗】

这里只是简单的加上拖动功能，要注意的是fixed定位时，计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。

使用说明

实例化时，必须有弹出层作为参数：

new AlertBox("idBox");

オプションのパラメータは、次のようなプログラムのデフォルト属性を設定するために使用されます。
属性: デフォルト値//説明
fixed: false、//位置が固定されているかどうか
zIndex: 1000,// カスケード数
onShow: $$.emptyFunction,// 表示時に実行
onClose: $$.emptyFunction// 閉じた時に実行

次のメソッドも提供されています:
show: ポップアップ レイヤーを表示します。
close: ポップアップ レイヤーを非表示にします。
dispose: プログラムを破棄します。

ie6 と互換性のある拡張機能を追加すると、ie6 の修正された問題が自動的に修正されます。fixSelect 属性に従って選択マスクのバグを修正するかどうかを設定できます。
センタリング拡張機能を追加した後、center 属性に従ってセンタリングするかどうかを設定できます。デフォルトは no です。

RepairFixed は修正されたオブジェクトを修正し、修正する必要がある要素を追加および削除するための追加メソッドと削除メソッドを備えています。IE6 でのみ使用できます。
OverLay オーバーレイ オブジェクトには次の属性があります:
属性: デフォルト値//説明
"color": "#fff",//背景色
"opacity": .5,// 透明度(0-1)
"zIndex": 100, // オーバーレイ値
オーバーレイを表示および非表示にする show メソッドと close メソッドもあります。

パッケージのダウンロード アドレス