Home/ Questions/Q 7684293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T18:59:35+00:00

I put together a short script for a fellow classmate and thought I would

  • 0

I put together a short script for a fellow classmate and thought I would show a nice backgound fade to make it look nicer. I can achieve the color change but it will not transition smoothly from one state to the next. I thought this would work but perhaps I am wrong or missed something.

Everything else in the script works so go ahead and use if you wish. All it does is cause a screen halt so a error or message can be displayed before doing anything else.

the template:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try by adding an “s” behind the values for time in your CSS definition for “#haltPage”:

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