理解javascript中的對話框

前面的話

　　通常我們調試程式時，如果需要阻塞效果，則要用到alert()。但除了alert()以外，window對象還提供了其他3種對話框。本文將詳細介紹window對象中的對話框

定義

　　系統對話框與在瀏覽器中顯示的網頁沒有關係，也不包含HTML。它們的外觀由操作系統及瀏覽器設置決定，而不是由CSS決定。window對象下的常用對話框有alert()、confirm()、prompt()，當然也包含不常用的print()。通過這幾個方法打開的對話框都是同步和模態的。也就是說，顯示這些對話框的時候代碼會停止執行，而關掉這些對話框後代碼又會恢復執行

alert()

　　alert()方法接受一個字元串，並將其顯示給用戶並等待用戶關閉對話框

　　[註意]該方法包含預設的String()隱式類型轉換，非字元串類型會被轉換為字元串

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    alert([1,2,3]);//'1,2,3'
}
</script>

confirm()

　　confirm()方法同樣接收一個字元串，並將其顯示給用戶。返回的布爾值若是true表示單擊OK，false表示單擊Cancel或者右上角的關閉按鈕

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    if(confirm('是否添加背景顏色？')){
        myDiv.style.backgroundColor = 'pink';
    }else{
        myDiv.style.backgroundColor = 'transparent';
        alert('好吧，那就不加背景顏色了。')
    }
}
</script>

prompt()

　　prompt()方法接收兩個參數，要顯示給用戶的文本提示和文本輸入域的預設值(可以是一個空字元串)。如果用戶單擊了OK按鈕，則返迴文本輸入域的值；如果用戶單擊了Cancel或者右上角的關閉按鈕，則該方法返回null

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    var result = prompt("能告訴你叫什麼嗎?" ,"火柴");
    if(result != null){
        if(result == '火柴'){
            alert('火柴是我的名字哦');
        }else{
            alert("歡迎你,"+result); 
        }
    }else{
        alert('好吧，歡迎你，匿名。我以前一直以為匿名是個作家的名字');
    }
}
</script>

print()

　　window.print()方法可以用來顯示列印對話框

<div id="myDiv">點擊此處</div>
<script>
myDiv.onclick = function(){
    window.print();
}
</script>