CODEWITHSUNDEEP
javascript
R R
R R

Reputation: 2956

Fading the body using javascript

As it is clear from the title of my question that i want to fade body using javascript. in short what i want to do is i want to display an alert box in the screen and other than alert box whole body background will be fade.Is it possible using javascript?

What i tried so far:

HTML:

<tr><td><table class="popup" style="font-size:12px;border-bottom:1px solid #482C1F !important; text-align: center !important;top:-10000px;position:absolute;" id="nameFieldPopup" border="0" cellpadding="0" cellspacing="0">

  <div id="dontfade">  
<tr><td align="left" style="padding-left:10px; padding-top:30px; " id="detailstd"></td></tr>
<tr><td align="right"><input type="button" name="ok" value="OK" onClick="closepopup();"></td></tr>
    </table></td></tr>
</tr>
</div>
</div>

Javascript:

    window.onload=function(){
    moduleidvar=<?php echo $moduleid?>;
    alert(moduleidvar);
    if (moduleidvar==-1) {
     var tdControl = document.getElementById("detailstd");
     tdControl.innerHTML = "eNPS is een moderne
     en efficiënte manier voor het meten van medewerker bevlogenheid.In een  ";

    document.getElementById('nameFieldPopup').style.top="";
    document.getElementById('nameFieldPopup').style.visibility = "visible";  
    }

    };

Upvotes: 0

Views: 182

Answers (3)

Bas van Dijk
Bas van Dijk

Reputation: 10713

A common technique to fade the body is to use a div which is on top of everything except your popup. When you fade in/out this div it looks like the body is fading.

In my Fiddle, the popup has a higher z-index than the white mask. When you click on the popup it will fadeout the mask so the body will be visible:

$("#popup").click(function() {
    $("#mask").fadeOut();
    $(this).hide();
});

The mask is created with:

#mask {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    position: absolute;
    opacity: 0.9;
}

The opacity: 0.9 makes the mask semi-transparent. You can change this to any value between 1 and 0.

See http://jsfiddle.net/WaPXN/1/

Upvotes: 3

Nate Bolam
Nate Bolam

Reputation: 499

I think maybe you just want a modal dialog. This can be done easily with jQuery UI. It won't be blocking like a regular alert().

<script>
var showAlert = function() {
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        buttons: {
            "OK": function() {
                // Your code here
                $(this).dialog("close");
            }
        }
    });
};
$(function() {
    showAlert();
});


<body>
    <div>background</div>
    <div id="dialog-confirm" title="Alert">Lorem Ipsum</div>
</body>

EXAMPLE

Upvotes: 1

tewathia
tewathia

Reputation: 7298

Do you mean something like this?

DEMO

I'm slowly reducing the opacity of one div(which can contain all your background stuff) while the other div(which can contain the stuff that isn't supposed to fade) remains unaltered.

document.getElementById('btn').onclick = function () {
    fade.style.opacity = 1;
    var h = setInterval(function () {
        if (fade.style.opacity > 0.3) {
            fade.style.opacity -= 0.1;            
        } else {
            clearInterval(h);
            alert('some text');
        }
    }, 100);
}

Edit: Updating the fiddle for the second part of your question.

DEMO2

(this is in jQuery though)

Upvotes: 1

Related Questions