Update successful notice with pure css and a close button

Question

Hi guys, i've seen websites that allow you to say update your profile and when the stuff is done, they'll stay in the same page or redirect you to another and with a fancy notice that says "Update successful. click here to close" with a lowered opacity black background and a box in the middle with the text within.

I've got most of the stuff, the lowred opacity black background, the middle box with the text and even the click here to close function.

But how i did the "Click here to close" function is by using a link.

Let's say after updating the profile, my script redirect me to index.php?update=successful then i use

$update = $_GET['update'];
if ($update == "successful") {
echo    '<div id="BlackScreen"><p id="MiddleBox">You\'ve successfully update your
status!<br><span class="close"><a class="menu" href="index.php">Click to close.
</a></span></div></div>';
}

so that the lowered opacity background div will be gone, but is there another way to do this? Any tips please?

Answer 1

If you want to remove the message when the user clicks a button or link, you'll need to use Javascript. In the simplest form, you could do this:

echo  '<div id="BlackScreen"><p id="MiddleBox">'
    . 'You\'ve successfully update your status!<br>'
    . '<span class="close">'
    . '<a '
    .   'onclick="document.getElementById(\'BlackScreen\').style.display=\'none\'; return false" '
    .   'class="menu" href="index.php">Click to close.'
    . '</a></span></div></div>';

It's not a great solution, but it's an example of how easy it could be.

Answer 2

If javascript is an option (seems it might be from your comments), the jQuery example would be:

<script type="text/javascript">
$(function() {
  $("#BlackScreen a.menu").click(function() {
    $("#BlackScree").fadeOut();
  });
});
</script>