jQuery は、IE6 および IE7_jquery と互換性のある単純な Web ページ マスク レイヤー/ポップアップ レイヤー効果を実装します。

最近の仕事で、Web サイトのコードをすべて書き換える必要があったので、担当者からオンライン プラグインを使用しないように言われました。大草原を疾走する馬の要件~~~

まず比較的単純な関数を実装します:

要件: Web ページのマスク レイヤー/ポップアップ レイヤー、IE6 と互換性あり

幸いなことに、以前に js バージョンを上手に収集したので、将来使用できるようにそれを jQuery プラグインに書き直しました。

もうでたらめも検閲も真実もありません!

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

/**********************************
* @name Layer ブラウザ間互換性プラグイン v1.0
*** ****************************/
; (function($){
$.fn.layer = function(){
var isIE = (document.all) ? true : false;
var isIE6 = isIE && !window.XMLHttpRequest ;
var 位置 = !isIE6 ? : "絶対";
var コンテナボックス = jQuery(this); :"ブロック ","位置":位置 ,"上":"50%","左":"50%","マージン-上": -(containerBox.height()/2) "px"," margin-left ": -(containerBox.width()/2) "px"});
varlayer=jQuery("

");
layer.css({ "width" :"100%","height":"100%","position":position,"top":"0px","left":"0px","background-color":"#000" ,"z -index":"9998","opacity":"0.6"});
jQuery("body").append(layer);
functionlayer_iestyle(){
var maxWidth = Math.max (document.documentElement.scrollWidth, document.documentElement.clientWidth) "px";
var maxHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) "px"; .css( {"width" : maxWidth , "height" : maxHeight });
}
functioncontainerBox_iestyle(){
var marginTop = jQuery(document).scrollTop -containerBox.height()/ 2 "px" ;
var marginLeft = jQuery(document).scrollLeft -containerBox.width()/ 2 "px";
containerBox.css({"margin-top" : marginTop , "margin-left" : marginLeft }) ;
}
if(isIE){
layer.css("filter","alpha(opacity=60)");
}
if(isIE6){
layer_iestyle ();
containerBox_iestyle();
jQuery("window").resize(function(){
layer_iestyle();
レイヤー.click( function(){
containerBox.hide();
jQuery(this).remove();
})(jQuery); >

はは、とても単純なことではありませんが、ここに大きなバグがあります。IE6 は透明な背景色をサポートできないため、IE6 の表示の下に大きな黒いたわごとが表示されます。 ~

次に、
の使用法について説明します。

ステップ 1: jquery ファイルを引用します。これについては詳しく説明しません。 http://jquery.com

ステップ 2: 私のプラグインを参照してください。これについては多くは言いません。
クリックしてダウンロード、
ステップ 3:中央のボックスに表示したいコンテンツは、私が実装することはできないので、自分で作成して Web ページの下部に配置する必要があります。

例:


コードをコピーします


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

カラスの足元を跳ね飛ばしてください~~

🎜>ステップ 4: ポップアップさせたい場所にコンテンツ ボックスを追加します。例としてクリックします:

コードをコピー


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

$("# Tan").click(function(){
$("#kabulore-layer").layer();

} ); これで完了です。 注: このプラグインは、灰色の領域をクリックすると、ポップアップ レイヤーを自動的に非表示にします。閉じるボタンを追加して非表示にしたい場合は、閉じるイベントを自分で記述することができます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。