確定和取消提示框效果

admin發表於2018-08-07

在很多網頁都有這樣的效果，當點選一個按鈕或者其他的物件會彈出一個提示框，如果點選確定則繼續執行既定的程式，如果點選取消則會取消繼續執行，程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>確定和取消提示框</title>
<style type="text/css">
div{
  width:150px;
  margin:0px auto;
}
a{
  font-size:12px;
  color:blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var mylink=document.getElementById("mytest");
  mylink.onclick=function(){
    if(confirm("確定要訪問螞蟻部落嗎")){
       return true;
    }
    else{
       return false;
    }
  }
}
</script>
</head>
<body>
  <div><a href="http://www.softwhy.com" id="mytest">點選跳轉到螞蟻部落</a></div>
</body>
</html>

以上程式碼中，當點選連結會彈出一個提示框，如果點選確定則會訪問螞蟻部落首頁，否則不會訪問。實現此功能核心是使用了confirm()，引數值是提示框的文字內容。下面就簡短介紹一下以上程式碼的原理：

一.當點選連結的時候，會呼叫為a元素繫結的onclick事件處理函式。

二.在事件處理函式中，由於當點選確定按鈕，confirm()會返回true，點選取消則會返回false，那麼if語句則會根據confirm()的返回值選擇執行if語句還是else語句。

相關文章