使用纯css和关闭按钮更新成功通知

时间:2010-05-08 12:53:03

标签: css

我已经看过允许您更新自己的个人资料的网站,当这些内容完成后,他们会留在同一页面或将您重定向到另一个页面并通过一个花哨的通知说“更新成功。点击此处关闭“黑色背景不透明度降低,中间有一个方框,内有文字。

我有大部分的东西,低矮的不透明度黑色背景,带文字的中间框,甚至点击这里关闭功能。

但我如何使用“点击此处关闭”功能使用链接。

让我们说更新配置文件后,我的脚本将我重定向到index.php?update =成功然后我使用

$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>';
}

这样降低的不透明度背景div将消失,但还有另一种方法吗?有什么提示吗?

2 个答案:

答案 0 :(得分:1)

如果javascript是一个选项(似乎可能来自您的评论),jQuery示例将是:

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

答案 1 :(得分:0)

如果您想在用户点击按钮或链接时删除该消息,则需要使用Javascript。在最简单的形式中,您可以这样做:

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>';

这不是一个很好的解决方案,但它是可以轻松实现的一个例子。