将JSP的样式标记转换为CSS条目

Question

我在jsp中有几个标签，如下所示

<style type="text/css">
    #mask {
        display: none;
        cursor: wait;
        z-index: 99999;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: white;
        filter: alpha(opacity=70);
    }
</style>

<div id="mask">
    <div style="position: absolute; top : 300px; left : 550px; text-align : center; vertical-align: middle;font-family: arial,helvetica,verdana,sans-serif; color : red; font-size : 16px; font-weight : bold; text-decoration: underline;">
        <img src="<%=request.getContextPath()%>/images/progress.gif" />
        <br/>loading
    </div>
</div>

当我尝试将它们包含为CSS条目时，我无法正确获取输出。

.busyDiv {
    position: absolute;
    top: 300px;
    left: 550px;
    text-align: center;
    vertical-align: middle;
    font-family: arial, helvetica, verdana, sans - serif;
    color: red;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

.busyStyle {
    display: none;
    cursor: wait;
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    height: 100 % ;
    width: 100 % ;
    background-color: white;
    filter: alpha(opacity = 70);
}

我用它们作为

<style type="text/css" class="busyStyle">
    #mask {}
</style>

<div id="mask">
    <div class="busyDiv">
        <img src="<%=request.getContextPath()%>/images/progress.gif" />
        <br/>loading
    </div>
</div>

当我使用上述CSS条目时，功能无法按预期工作？

我错过了什么吗？ （当我将标签保存在jsp中时它会起作用，但我想将样式分成CSS条目）

Answer 1

我更改了以下样式以使其正常工作

CSS中的

.hiddenDiv {
    display: none;
    background-color: white;
}

.visibleDiv {
    display: none;
}

.hiddenStyle {
    cursor: wait;
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: white;
    filter: alpha(opacity=70);
}

.busyStyle {
        position: absolute;
        top: 300px;
        left: 550px;
        text-align: center;
        vertical-align: middle;
        font-family: arial, helvetica, verdana, sans - serif;
        color: red;
        font-size: 16px;
        font-weight: bold;
        text-decoration: underline;
}

JS中的

function showBusy() {
    document.getElementById('mask').className = 'hiddenStyle';
    return false;
    }

JSP 中的

<div id="mask" class="hiddenDiv">
        <div class="busyStyle">
            <img src="<%=request.getContextPath()%>/images/progress.gif" />
            <br/>loading
        </div>
</div>