點選連結a彈出一個確認框例項程式碼

螞蟻小編發表於2017-03-16

很多需要破壞性操作的時候，一般都會給出一定的提示，以防止出現誤操作，例如在刪除新聞的時候一般都會出現這樣的提示，當然點選的不一定非得是連結，這裡只是一個演示而已。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:20px;
  margin:0px auto;
}
a{
  text-decoration:none;
  font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript"> 
function winconfirm(){ 
  var message=confirm("確認刪除嗎？") 
  if(message==true){ 
    window.open("http://www.softwhy.com") 
  } 
} 
window.onload=function(){
  var del=document.getElementById("del");
  del.onclick=function(){
    winconfirm();
    return false
  }
}
</script> 
<div><a href="#" id="del">檢視效果</a></div>
</body>
</html>

以上程式碼實現了我們的要求，當點選連結，可以彈出提示框，點選確定可以跳轉到其他頁面。

特別說明:

1.confirm()函式的返回值是布林型的，點選確定返回true，點選發取消返回false。

2.onclick事件處理函式之所以使用return false，是為了取消連結的跳轉效果。

相關文章