Цвет фона не исчезает - PullRequest
Новая
       4

Цвет фона не исчезает

0 голосов
/ 22 марта 2012

Я составил короткий сценарий для одноклассника и подумал, что покажу хороший фоновый эффект, чтобы он выглядел лучше Я могу добиться изменения цвета, но он не будет плавно переходить из одного состояния в другое. Я думал, что это сработает, но, возможно, я ошибаюсь или что-то упустил.

Все остальное в скрипте работает, так что используйте его, если хотите. Все, что он делает, это вызывает остановку экрана, поэтому перед дальнейшими действиями может отображаться ошибка или сообщение.

шаблон: 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Message Expansion Demonstration</title>

<style>

body {  
        margin:0 auto;
        padding:0 0;
        height:100%;
        width:100%;
        text-align:center; }

#haltPage {
        display:none;
        position:absolute;
        height:100%;
        width:100%;
        top:0px;
        background-color:rgba(0, 0, 0, 0.0);
        transition: background-color 1s linear .1; 
        -webkit-transition: background-color 1s linear .1;
        -o-transition: background-color 1s linear .1;
            z-index=9999;
   }

.wrong {
        position:relative;
        padding:auto auto;
        margin:auto auto;
        height:250px;
        width:400px;
        background-color:#666;
        border-bottom-left-radius:0.5em 0.5em;
        border-bottom-right-radius:0.5em 0.5em;
        border-top-left-radius:0.5em 0.5em;
        border-top-right-radius:0.5em 0.5em;
        box-shadow:5px 10px 25px #000;  }

.wrong p {
        padding:10px;  }

</style>

<script>

function wrong ( classID ) 
{
    var on = 'block';
    var visable = 'rgba(0, 0, 0, 0.4)'; 

    clearClass ( );
    document.getElementById('haltPage').style.display = on;

    document.getElementById('haltPage').style.backgroundColor = visable;
    document.getElementById(classID).style.display = on; 
}

function clearClass ( ) 
{
    var off = 'none';
    document.getElementById('haltPage').style.display = off;
    document.getElementById('wrong1').style.display = off;
    document.getElementById('wrong2').style.display = off;
    document.getElementById('wrong3').style.display = off;
}

</script>

</head>

<body>

    <a href="#" onClick="wrong('wrong1')">Wrong Answer One</a><br><br>
    <a href="#" onClick="wrong('wrong2')">Wrong Answer Two</a><br><br>
    <a href="#" onClick="wrong('wrong3')">Wrong Answer Three</a><br><br>

<!-- This is not seen untill called -->
    <div id="haltPage">
    <br><br><br>
        <div id="wrong1" class="wrong">

            <h1>Wrong!</h1>
            <p>You are wrong!<br><a href="#" onClick="clearClass();">Close</a></p>

        </div>

        <div id="wrong2" class="wrong">

            <h1>Wrong!</h1>
            <p>You are wronger! < Not a word<br><a href="#" onClick="clearClass();">Close</a></p>

        </div>

        <div id="wrong3" class="wrong">

            <h1>Wrong!</h1>
            <p>You are wrongest! < duh<br><a href="#" onClick="clearClass()">Close</a></p>

        </div>     

    </div>

</body>

</html>

1 Ответ

0 голосов
/ 22 марта 2012

Попробуйте добавить «s» за значениями времени в определении CSS для «#haltPage»: 

    transition: background-color 1s linear .1s; 
    -webkit-transition: background-color 1s linear .1s;
    -o-transition: background-color 1s linear .1s;
...