JQueryマスクレイヤー実装(マスク)実装 code_jquery

顧客エクスペリエンスを向上させるために、マスク レイヤーとプロンプト メッセージを指定された要素に追加する、mask() と unmask() の 2 つのメソッドがあります。最近プロジェクトに取り組んでいたとき、これら 2 つのメソッドを使用するには、比較的「大きな」Extjs を導入する必要があることがわかり、少し不経済だと感じたので、jquery を使用して比較的単純なマスクを実装しました。この効果を実現するための unmask メソッド。 jquery はサイズが小さいだけでなく、使いやすい優れた JavaScript フレームワークであることは誰もが知っています。現在、私はシステム内で Extjs を使用して実装されているすべてのコードやコンポーネントを徐々に Jquery に置き換えています。さて、これ以上の手間は省きますが、これらのコードはインターネット上の友人によって実装された documentMask に基づいて修正されています。より柔軟で使いやすくなります。
(技術的な内容はありません。困っている人を助けるために設計されています)

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

(function(){
$.extend($.fn,{
mask: function(msg,maskDivClass){
this.unmask();
// パラメータ
var op = {
不透明度: 0.8,
z: 10000,
bgcolor: '#ccc'
}; >varposition={top:0,left:0};
if(this[0] && this[0]!==window.document){
original=this;
position=original. Position();
}
// マスク レイヤを作成し、オブジェクトに追加します
var MaskDiv=$('

');
maskDiv.appendTo(original);
var マスク幅=original.outerWidth();
if(!maskWidth){
maskWidth=original.width();マスク高さ =original.outerHeight();
if(!maskHeight){
maskHeight=original.height();
}
maskDiv.css({
位置: '絶対',
top:position.top、
left:position.left、
'z-index':op.z、
width:maskWidth、
height:maskHeight、
'background-カラー ': op.bgcolor,
不透明度: 0
});
if(maskDivClass){
maskDiv.addClass(maskDivClass)
}
if(msg); 🎜 >var msgDiv=$('

' msg '

');
msgDiv.appendTo(maskDiv);
var widthspace= (マスクDiv.width()-msgDiv.width());
var heightspace=(maskDiv.height()-msgDiv.height());
msgDiv.css({
cursor:'wait' ,
top:(heightspace/2-2),
left:(widthspace/2-2)
});
}
maskDiv.fadeIn('fast', function() {
// フェードインおよびフェードアウト効果
$(this).fadeTo('slow', op.opacity);
})
return
},
マスク解除: function( ){
varoriginal=$(document.body);
if(this[0] && this[0]!==window.document){
original=$(this[0] ]);
}
original.find("> div.maskdivgen").fadeOut('slow',0,function(){
$(this).remove();
});
}
});
})();


以下は参考コードです

コードをコピーします

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

body{
font-size:12px;
}

关闭div遮罩 ;a href="#" onclick="$(document).mask('全遮蔽罩').click(function(){$(document).unmask()})">全面遮罩