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 = Report的按钮时，系统会调用该功能并显示包含报告信息的页面。

但是，如果未设置dataSource和statusID，则我的代码以异常结束。

我是否可以通过某种方式检查DataSource的值是否等于“00”且StatusID不等于“0”，然后显示一个对话框，告诉用户应该选择这些字段。

理想情况下，我希望有类似Stackoverflow使用的对话框。

Answer 1

我不确定00和0在您的请求中代表什么，但我将它们放在那里。我不熟悉Stack Overflow对话框，但这里有一些起始代码。外部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;
}

如何显示stackoverflow之类的对话框？

1 个答案: