样式
复制番号代番号次のように:
<style type="text/css">
本文{font-size:13px}
.divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px}
.divShow スパン{padding-left:50px}
.dialog{幅:360px;ボーダー:solid 5px #666;position:absolute;display:none;z-index:101}
.dialog .title{背景色:#fbaf15;パディング:10px;カラー:#fff;フォントの太さ:太字}
.dialog .title img{float:right}
.dialog .content{背景色:#fff;パディング:25px;高さ:60px}
.dialog .content img{float:left}
.dialog .content スパン{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
.mask {幅:100%;高さ:100%;背景色:#000;位置:絶対;
上:0px;左:0px;フィルター:アルファ(不透明度=30);表示:なし;z-index:100}
.btn {ボーダー:#666 1px ソリッド;パディング:2px;幅:65px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</スタイル>
jQuery
复制番号代番号次のように:
<script type="text/javascript">
$(関数() {
$("#Button1").click(function() { //注册删除按钮点击イベント
$(".mask").show(); //背景色を表示
showDialog(); // 提案を上部と左に配置します
$(".dialog").show(); //表示提案对话框
})
/*
* 現在のトップ面と移動バーの位置に応じて、移動バーの上と左を配置します。
*/
関数 showDialog() {
var objW = $(ウィンドウ); //当前窗口
var objC = $(".dialog"); //对话框
var brsW = objW.width();
var brsH = objW.height();
var sclL = objW.scrollLeft();
var sclT = objW.scrollTop();
var curW = objC.width();
var curH = objC.height();
//衆居中の左边距離を計算する
var left = sclL + (brsW - curW) / 2;
//衆在中の上边距離を計算します
vartop = sclT + (brsH - curH) / 2;
// 面内の位置を配置します
objC.css({ "左": 左, "上": 上 });
}
$(window).resize(function() {//页面窗口大小改变イベント
if (!$(".dialog").is(":visible")) {
戻る;
}
showDialog(); // 提案を上部と左に配置します
});
$(".title img").click(function() { //注册关闭图片点击イベント
$(".dialog").hide();
$(".mask").hide();
})
$("#Button3").click(function() {//注册取消按钮点击イベント
$(".dialog").hide();
$(".mask").hide();
})
$("#Button2").click(function() {//注册确定按钮点击イベント
$(".dialog").hide();
$(".mask").hide();
if ($("input:checked").length != 0) {//如果选择了删除行
$(".divShow").remove(); //删除某行データ
}
})
})
</script>
html
复制番号代番号次のように:
<div>
<input id="チェックボックス1" type="チェックボックス" />
<a href="#">これは一条可删除的记录</a>
<スパン>
<input id="Button1" type="button" value="删除" />
</スパン>
</div>
<div></div>
<div>
<div>
<img src="Images/close.gif" />删除時間のヒント
</div>
<div>
<img src="Images/delete.jpg" /><span>您真的要删除该条记录吗?</span>
</div>
<div>
<input id="Button2" type="button" value="确定"/>
<input id="Button3" type="button" value="取消"/>
</div>
</div>