如何顯示像stackoverflow對話框？

Question

我有我的網頁上下面的代碼：

$('#Report').click(Report); 

    function Report() { 
     var e = encodeURIComponent, 
       arr = [ 
       "dataSource=" + e($('#DataSource').val()), 
       "statusID=" + e($('#StatusID').val()) 
       ]; 
     window.location.href = '/Administration/Tests/Report?' + arr.join("&"); 
     return false; 
    } 

當使用id =報告按鈕用戶點擊，則函數被調用，它顯示了報告信息的頁面。

但是，如果未設置dataSource和statusID，那麼我的代碼將以異常結束。

是否有某種方式可以檢查DataSource的值不等於「00」且StatusID不等於「0」，然後顯示一個對話框，告訴用戶應該選擇這些字段。

理想情況下，我想有像Stackoverflow使用的對話框的東西。

Answer 1

我不確定00和0代表您的請求，但我把它們放在那裏。我不熟悉堆棧溢出對話框，但這裏有一些起始代碼可以使用。外部div（#error-frame）可防止在顯示框時點擊任何其他元素。

演示：http://jsfiddle.net/ThinkingStiff/CW5wW/

腳本：

function Report() { 

    var dataSource = $('#DataSource').val(), 
     statusId = $('#StatusID').val(); 

    if(dataSource && statusId && dataSource != '00' && statusId != '0') { 

     var e = encodeURIComponent, 
      arr = [ 
      "dataSource=" + e(dataSource), 
      "statusID=" + e(statusId) 
      ]; 

     window.location.href = '/Administration/Tests/Report?' + arr.join("&"); 

    } else { 
     //error msg here, perhaps: 
     showError('Both Data Source and Status ID are required.'); 
    }; 

    return false; 

} 

function showError(message) { 

    document.getElementById('error-message').textContent = message; 
    document.getElementById('error-frame').style.display = 'block';  

    var error = document.getElementById('error'); 

    error.style.left = ((window.innerWidth/2) - (error.scrollWidth/2)) + 'px'; 
    error.style.top = ((window.innerHeight/2) - (error.scrollHeight/2)) + 'px'; 

}; 

HTML：

<div id="error-frame"><div id="error"><div id="error-message"></div><button onclick="this.parentNode.parentNode.style.display='none'">OK</button></div></div> 

CSS：

#error-frame { 
    display: none; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 9999; 
} 

#error { 
    border: 4px solid darkgray; 
    height: 100px; 
    padding: 4px; 
    position: relative; 
vwidth: 200px; 
} 

#error button { 
    position: absolute;  
    right: 0; 
    bottom: 0; 
}