點選刪除按鈕彈出是否刪除提示框

admin發表於2018-11-19

實際應用中，要刪除一個元素，往往要彈出一個警告框，讓使用者確認是否要真的刪除指定元素，防止誤操作。

下面通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-size:13px;
}
.divShow{
  line-height:32px;
  height:32px;
  width:280px;
  background-color:#eee;
  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);
  opacity:0.3;
  z-index:100;
  display:none;
}
.btn{
  border:solid 1px #666;
  padding:2px;
  width:65px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $("#bt").click(function (){
    $(".mask").show();
    showDialog();
    $(".dialog").show();
  });
  function showDialog() { 
    var objW=$(window);
    var objC=$(".dialog");
    var brsW=objW.width(); 
    var brsH=objW.height(); 
    var sclL=objW.scrollLeft(); 
    var sclT=objW.scrollTop(); 
    var cruW=objC.width(); 
    var cruH=objC.height(); 
    var left=sclL+(brsW-cruW)/2;
    var top=sclT+(brsH-cruH)/2;
    objC.css({"left":left,"top":top});
  } 
  $(window).resize(function(){
    if(!$(".dialog").is(":visible")){ 
      return; 
    } 
    showDialog();
  });
  $(".title img").click(function (){
    $(".dialog").hide(); 
    $(".mask").hide(); 
  }); 
  $("#cancle").click(function(){
    $(".dialog").hide(); 
    $(".mask").hide(); 
  }); 
  $("#enter").click(function(){
    $(".dialog").hide(); 
    $(".mask").hide(); 
    if($("input:checked").length!=0){
      $(".divShow").remove();
    } 
  }); 
}); 
</script>
</head>
<body>
<div class="divShow">
  <input type="checkbox" id="Checkbox" />
  <a href="#">這是一條可以刪除的記錄</a> <span>
  <input type="button" id="bt" class="btn" value="刪除"/>
</div>
<div class="mask"></div>
<div class="dialog">
  <div class="title"><img src="mytest/demo/closebt.gif" alt="點選可以關閉"/>刪除時提示 </div>
  <div class="content"><img src="mytest/demo/delete.gif"/> <span>您真的要刪除該記錄嗎？</span></div>
  <div class="bottom">
    <input type="button" id="enter" value="確定" class="btn" />
    <input type="button" id="cancle" value="取消" class="btn" />
  </div>
</div>
</body>
</html>

要刪除記錄的時候可以彈出一個提示框，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$("#bt").click(function (){})，為刪除按鈕註冊click事件處理函式。

（3）.$(".mask").show()，顯示半透明的遮罩層。

（4）.showDialog()，設定警告框的在視窗中的位置。

（5）.$(".dialog").show()，顯示警告框。

（6）.function showDialog()，此函式設定彈出警告框在視窗中的位置。

（7）.var objW=$(window)，獲取瀏覽器視窗視窗物件。

（8）.var objC=$(".dialog")，獲取彈出視窗物件。

（9）. var brsW=objW.width()，獲取瀏覽器視窗的寬度。

（10）.var brsH=objW.height()，獲取瀏覽器視窗的高度。

（11）.var sclL=objW.scrollLeft()，獲取瀏覽器視窗滾動條向左滾動的距離。

（12）.var sclT=objW.scrollTop()，獲取瀏覽器視窗滾動條向上滾動的距離。

（13）.var cruW=objC.width()，獲取彈出警告視窗的寬度。

（14）.var cruH=objC.height()，獲取彈出警告視窗的高度。

（15）.var left=sclL+(brsW-cruW)/2，計算出彈出視窗的left屬性值，也就是讓彈出視窗水平居中。

（16）.var top=sclT+(brsH-cruH)/2，計算出視窗的top屬性值，也就是讓彈出視窗垂直居中。

（17）.objC.css({"left":left,"top":top})，使用css()函式設定left和top屬性值。

（18）.$(window).resize(function(){})，為瀏覽器視窗註冊resize事件處理函式。

（19）.if(!$(".dialog").is(":visible")){return;}，當彈出警告框不可見的情況下就跳出此函式。

（20）.showDialog()，設定彈出警告框在瀏覽器視窗的位置，也就是說當調整瀏覽器視窗的時候也能夠使彈出視窗居中。

（21）.$(".title img").click(function (){})，為關閉圖示註冊click事件處理函式。

（22）.$(".dialog").hide()，隱藏彈出視窗。

（23）.$(".mask").hide()，隱藏半透明遮罩層。

（24）.if($("input:checked").length!=0){}，如果沒有選中核取方塊。

（25）.$(".divShow").remove()，刪除指定的元素。

二.相關閱讀:

（1）.click事件可以參閱jQuery click事件一章節。 

（2）.show()可以參閱jQuery show()方法一章節。

（3）.scrollLeft()可以參閱jQuery scrollLeft()方法一章節。 

（4）.css()可以參閱jQuery css()方法一章節。

（5）.resize事件可以參閱jQuery resize事件一章節。 

（6）.:checked選擇器可以參閱jQuery :checked選擇器一章節。

（7）.remove()可以參閱jQuery remove()方法一章節。

相關文章