jQuery はクリック ボタン マスク ポップアップ ダイアログ ボックス (Tmall の削除ダイアログ ボックスの模倣) を実装します_jquery

天猫で買い物をしていると、削除ボタンやログインボタンをクリックすると、削除するかログインするかを尋ねるダイアログボックスが表示され、前のページの情報も表示されることがあります。 、[いいえ] をクリックするだけです。対応する変更はダイアログ ボックスでの操作後にのみ行われます。スクリーンショットは次のとおりです (Tmall を例にしています)

図に示すように、上記は Tmall のレンダリングです。実際、これは jQuery を通じて実現されており、実装プロセスはそうではありません。非常に複雑です。実装プロセスを見てみましょう。

最初はページのレイアウト部分です: delete.html

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

;meta http -equiv="keywords" content="keyword1,keyword2,keyword3">
-equiv= "content-type" content="text/html; charset=UTF-8">





delete.js

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

$(function(){

//削除ボタンのトリガー イベントをバインドします
$("#button1").click(function) (){

$(".mask").css("opacity","0.3").show();
showDialog();
$(".dialog")。 show();
} );

/*
* スクロールバー上の現在のページの位置に応じてプロンプトダイアログボックスの上部と左側を設定します
*/
function showDialog(){
var objw= $(window);//現在のウィンドウ
var objc=$(".dialog");//現在のダイアログ ボックス
var brsw=objw.width ();
var brsh=objw.height();
var sclL=objw.scrollTop(); ;
var curh=objc.height();
//ダイアログ ボックスが中央にあるときの左マージンを計算します
var left=sclL (brsw -curw)/2; (brsh-curh)/2;

/ /ダイアログ ボックスを中央に設定します
objc.css({"left":left,"top":top}); }

//ページ ウィンドウ サイズが変更されたときにトリガーされます Event
$(window).resize(function(){

if(!$(".dialog").is( ":visible")){
return;
}
showDialog();
});

//画像を閉じるクリックイベントを登録します
$(". title img").click(function(){

$(".dialog").hide();
$(".mask").hide();

});
//キャンセルボタンイベント
$( "#noOk").click(function(){
$(".dialog").hide();
$(".マスク").hide();
});

//OK ボタン left
$("#ok").click(function(){

$( ".dialog").hide();
$(" .mask").hide();

if($("input:checked").length !=0){
//フィルターセレクターの途中にスペースを入れることはできないことに注意してください $("input :checked") これは間違っています

$(".divShow").remove();// a を削除します特定のデータ
}

});


}); 🎜>メインエージェントは動的確認ダイアログボックスの場所を表示するための showDialog() であることに注意してください。