Question

jQuery noob：

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

到目前为止，我已经尝试将hideDiv类添加到消息div中，但是然后messageDiv根本不显示（在加载或按钮单击时）。我也尝试隐藏/显示包裹Div的父母（此处未显示）。

连连呢？

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

<style type="text/css">
.alert{display:block;width:100%;color:#900000;font-size: 1.4em;}
.hideDiv{display:none;}
</style>

<script type="text/javascript">
$(document).ready(function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert"); setTimeout(function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).fadeOut("slow", function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).remove();
});
}, 4000);
});
</script>

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 

protected void Button1_Click(object sender, EventArgs e)
{messageDiv.InnerText = "Row Action Completed";}

Answer 1

所以你把你的消息div设置为display：none;通过css，对吧？

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

试试。

但是，您也可以自动执行fadeOut：

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

Answer 2

看看jQuery UI dialog。

他们有很多选项来显示警报信息。

比编写自己的解决方案更好。

Answer 3

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

解决方案：

页面加载时必须隐藏消息div（display：none）。
我将页面级服务器端var设置为false，以指示不应显示该消息（按解决方案here）
在服务器端按钮单击事件
在调用代码显示/淡化Div
在添加警报类和淡入淡出效果之前，从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>

这是一项有趣的练习，但我确信这里有一个更加完善的控制或解决方案，可以在某处显示/淡化.net中的消息。

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

3 个答案: