页面加载时隐藏jQuery消息div（在asp.net 4.0页面上）

jquerynoob在这里：

我有下面的消息div，它在点击按钮时显示一条消息，几秒钟后消失。这个很好用。但是，我希望消息div在页面加载时隐藏，并在单击按钮时显示

到目前为止，我已经尝试将hideDiv类添加到messageDiv中，但是messageDiv根本不显示（加载或单击按钮时）。我还尝试隐藏/显示父包装Div（此处未显示）

建议

<div id="messageDiv" runat="server" class="alert">Row Deleted</div>

行已删除

.alert{显示：块；宽度：100%；颜色：900000；字体大小：1.4em；}
.hideDiv{display:none；}

$（文档）.ready（函数（）{
$（document.getElementById（“”））.addClass（“警报”）；setTimeout（函数（）{
$（document.getElementById（“”））.fadeOut（“慢”，函数（）{
$（document.getElementById（“”））.remove（）；
});
}, 4000);
});

受保护的无效按钮1\u单击（对象发送者，事件参数e）
{messageDiv.InnerText=“行操作已完成”；}

因此您将消息div设置为显示：无；通过css，对吗

$('#Button1').click(function() {
    $('#messageDiv').hide();
});

试试看

但是，您也可以自动进行淡出：

$(document).ready(function() {
    setTimeout(function(){ $('#messageDiv').fadeOut(); }, 2000);
});

看一看

它们有很多选项来显示警报消息

---

比写自己的解决方案要好。

所以我制定了自己的解决方案。我确信有一个更简洁的解决方案（我很高兴听到），但我最后给出了以下部分：

解决方案：

• 页面加载时必须隐藏消息div（显示：无）
• 我将页面级服务器端变量设置为false，以指示消息还不应显示（每个解决方案）
• 在服务器端按钮单击事件中将该var设置为true
• 在调用代码以显示/淡入Div之前，在jQuery中检查var=true
• 在添加警报类和淡入淡出效果之前，从messageDiv中删除现有的隐藏类

因此，所有工作部件：

服务器端脚本：

<script type="text/C#" runat="server">
    Boolean UserHasClicked = false;
    protected void Button1_Click(object sender, EventArgs e)
    {
        UserHasClicked = true;
        messageDiv.InnerText = "Row deleted successfully.";
    }
</script>

<script type="text/javascript">
var userHasClicked = '<%= this.UserHasClicked %>' == 'True'
$(document).ready(function () {
if (userHasClicked) {
$(document.getElementById('<%= messageDiv.ClientID %>')).removeClass("hideDiv");
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert");
$(document.getElementById('<%= messageDiv.ClientID %>')).delay(4000).fadeOut("slow");      
}
});
</script>

布尔UserHasClicked=false；
受保护的无效按钮1\u单击（对象发送者，事件参数e）
{
UserHasClicked=true；
messageDiv.InnerText=“行已成功删除。”；
}

客户端脚本：

<script type="text/C#" runat="server">
    Boolean UserHasClicked = false;
    protected void Button1_Click(object sender, EventArgs e)
    {
        UserHasClicked = true;
        messageDiv.InnerText = "Row deleted successfully.";
    }
</script>

<script type="text/javascript">
var userHasClicked = '<%= this.UserHasClicked %>' == 'True'
$(document).ready(function () {
if (userHasClicked) {
$(document.getElementById('<%= messageDiv.ClientID %>')).removeClass("hideDiv");
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert");
$(document.getElementById('<%= messageDiv.ClientID %>')).delay(4000).fadeOut("slow");      
}
});
</script>

var userhascapped=''=='True'
$（文档）.ready（函数（）{
如果（用户已单击）{
$（document.getElementById（“”））.removeClass（“hideDiv”）；
$（document.getElementById（“”））.addClass（“警报”）；
$（document.getElementById（“”））.delay（4000.fadeOut（“慢”）；
}
});

这是一个有趣的练习，但我确信在.net中的某处有一个更完善的控件或解决方案来显示/衰减消息

何时显示“行已删除”？什么时候“行操作完成”？

<script type="text/javascript">
var userHasClicked = '<%= this.UserHasClicked %>' == 'True'
$(document).ready(function () {
if (userHasClicked) {
$(document.getElementById('<%= messageDiv.ClientID %>')).removeClass("hideDiv");
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert");
$(document.getElementById('<%= messageDiv.ClientID %>')).delay(4000).fadeOut("slow");      
}
});
</script>