1. 程式人生 > >javascript中的對話框

javascript中的對話框

javascript

定義

  系統對話框與在瀏覽器中顯示的網頁沒有關系,也不包含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>

技術分享

  alert()方法的參數可以用\n指定換行

alert(‘本條提示\n分成兩行‘);

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

  [註意]prompt()方法的第二個參數是可選的,如果不提供的話,IE瀏覽器會在輸入框中顯示undefined。因此,最好總是提供第二個參數,作為輸入框的默認值

var result = prompt(text[, default]);

技術分享

<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>


javascript中的對話框