javascript中常用的幾種彈出視窗簡單介紹

antzone發表於2017-04-03
JavaScript

本章節簡單介紹一下js中常用的幾種內建彈出視窗出效果。

此文章比較適合於初學者，對於稍有竟然的人員來說可以果斷略過。

一.警告視窗:

使用aelrt()方法可以彈出一個警告視窗。

此方法屬於window物件，呼叫的時候window物件可以省略。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    alert("本站地址是softwhy.com");
  }
}
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼點選按鈕可以彈出一個視窗，alert()引數就是警告視窗的內容。

二.確認視窗:

confirm()方法可以彈出一個確認視窗，根據點選按鈕的不同，此方法可以返回true或者false。

此方法屬於window物件，呼叫的時候window物件可以省略。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    if(confirm("確定要跳轉到螞蟻部落嗎？")){
      location.href="http://www.softwhy.com";
    }
  }
}
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼點選按鈕可以彈出一個確認視窗，如果點選確定，那麼方法就會返回true，否則返回false。

三.輸入視窗:

prompt()方法可以彈出一個輸入資訊視窗。

具有兩個引數，第一個引數是類似於標題文字資訊，不可以被更改，第二個引數是要文字框的預設內容，可以被更改。

此方法屬於window物件，呼叫的時候window物件可以省略。

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  var otxt=document.getElementById("txt");
  obt.onclick=function(){
    otxt.value=prompt("螞蟻部落","輸入網站地址");
  }
}
</script>
</head>
<body>
<input type="text" id="txt"/>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

相關文章