js簡單實現(xiàn)刪除記錄時的提示效果
更新時間:2013年12月05日 17:55:35 作者:
刪除記錄時的提示效果,挺人性化的,實現(xiàn)的方法有很多,在本文為大家介紹下使用js是如何實現(xiàn)的
樣式
<style type="text/css">
body{font-size:13px}
.divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px}
.divShow span{padding-left:50px}
.dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
.dialog .title{background-color:#fbaf15;padding:10px;color:#fff;font-weight:bold}
.dialog .title img{float:right}
.dialog .content{background-color:#fff;padding:25px;height:60px}
.dialog .content img{float:left}
.dialog .content span{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
.mask {width:100%;height:100%; background-color:#000;position:absolute;
top:0px;left:0px;filter:alpha(opacity=30);display:none;z-index:100}
.btn {border:#666 1px solid;padding:2px;width:65px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
jquery
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //注冊刪除按鈕點擊事件
$(".mask").show(); //顯示背景色
showDialog(); //設(shè)置提示對話框的Top與Left
$(".dialog").show(); //顯示提示對話框
})
/*
*根據(jù)當(dāng)前頁面與滾動條位置,設(shè)置提示對話框的Top與Left
*/
function showDialog() {
var objW = $(window); //當(dāng)前窗口
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;
//計算對話框居中時的上邊距
var top = sclT + (brsH - curH) / 2;
//設(shè)置對話框在頁面中的位置
objC.css({ "left": left, "top": top });
}
$(window).resize(function() {//頁面窗口大小改變事件
if (!$(".dialog").is(":visible")) {
return;
}
showDialog(); //設(shè)置提示對話框的Top與Left
});
$(".title img").click(function() { //注冊關(guān)閉圖片點擊事件
$(".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(); //刪除某行數(shù)據(jù)
}
})
})
</script>
html
<div class="divShow">
<input id="Checkbox1" type="checkbox" />
<a href="#">這是一條可刪除的記錄</a>
<span>
<input id="Button1" type="button" value="刪除" class="btn" />
</span>
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img src="Images/close.gif" alt="點擊可以關(guān)閉" />刪除時提示
</div>
<div class="content">
<img src="Images/delete.jpg" alt="" /><span>您真的要刪除該條記錄嗎?</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="確定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
復(fù)制代碼 代碼如下:
<style type="text/css">
body{font-size:13px}
.divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px}
.divShow span{padding-left:50px}
.dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
.dialog .title{background-color:#fbaf15;padding:10px;color:#fff;font-weight:bold}
.dialog .title img{float:right}
.dialog .content{background-color:#fff;padding:25px;height:60px}
.dialog .content img{float:left}
.dialog .content span{float:left;padding-top:10px;padding-left:10px}
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
.mask {width:100%;height:100%; background-color:#000;position:absolute;
top:0px;left:0px;filter:alpha(opacity=30);display:none;z-index:100}
.btn {border:#666 1px solid;padding:2px;width:65px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
jquery
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //注冊刪除按鈕點擊事件
$(".mask").show(); //顯示背景色
showDialog(); //設(shè)置提示對話框的Top與Left
$(".dialog").show(); //顯示提示對話框
})
/*
*根據(jù)當(dāng)前頁面與滾動條位置,設(shè)置提示對話框的Top與Left
*/
function showDialog() {
var objW = $(window); //當(dāng)前窗口
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;
//計算對話框居中時的上邊距
var top = sclT + (brsH - curH) / 2;
//設(shè)置對話框在頁面中的位置
objC.css({ "left": left, "top": top });
}
$(window).resize(function() {//頁面窗口大小改變事件
if (!$(".dialog").is(":visible")) {
return;
}
showDialog(); //設(shè)置提示對話框的Top與Left
});
$(".title img").click(function() { //注冊關(guān)閉圖片點擊事件
$(".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(); //刪除某行數(shù)據(jù)
}
})
})
</script>
html
復(fù)制代碼 代碼如下:
<div class="divShow">
<input id="Checkbox1" type="checkbox" />
<a href="#">這是一條可刪除的記錄</a>
<span>
<input id="Button1" type="button" value="刪除" class="btn" />
</span>
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img src="Images/close.gif" alt="點擊可以關(guān)閉" />刪除時提示
</div>
<div class="content">
<img src="Images/delete.jpg" alt="" /><span>您真的要刪除該條記錄嗎?</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="確定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
相關(guān)文章
JavaScript實現(xiàn)獲得所有兄弟節(jié)點的方法
這篇文章主要介紹了JavaScript實現(xiàn)獲得所有兄弟節(jié)點的方法,實例分析了javascript節(jié)點遍歷的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07js 實現(xiàn)圖片預(yù)加載(js操作 Image對象屬性complete ,事件onload 異步加載圖片)
通過js操縱DOM很多情況下都是為了實現(xiàn)和當(dāng)前頁html元素的異步載入,我談?wù)剬mage對象的一些認識。2011-03-03javascript與jquery中的this關(guān)鍵字用法實例分析
這篇文章主要介紹了javascript與jquery中的this關(guān)鍵字用法,結(jié)合實例形式簡單分析了this關(guān)鍵字用于獲取當(dāng)前對象的使用技巧,非常簡單易懂,需要的朋友可以參考下2015-12-12JavaScript?getter?setter金字塔???????
這篇文章主要介紹了JavaScript?getter?setter金字塔???????,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08使用requestAnimationFrame實現(xiàn)js動畫性能好
requestAnimationFrame優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API,在運行時瀏覽器會自動優(yōu)化方法的調(diào)用,并且如果頁面不是激活狀態(tài)下的話,動畫會自動暫停,有效節(jié)省了CPU開銷,這篇文章給大家詳細介紹使用requestAnimationFrame實現(xiàn)js動畫2015-08-08