0

jQuery 菜鸟在这里：

我有以下消息 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";}
4

3 回答 3

0

因此，您将消息 div 设置为 display:none; 通过CSS，对吗？

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

试试看。

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

$(document).ready(function() {
    setTimeout(function(){ $('#messageDiv').fadeOut(); }, 2000);
});
于 2012-09-22T17:23:15.343 回答
0

看看jQuery UI 对话框。

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

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

于 2012-09-22T17:25:35.280 回答
0

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

解决方案：

  • 消息 div 必须在页面加载时隐藏（显示：无）。
  • 我将页面级别的服务器端 var 设置为 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>

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

于 2012-09-22T21:32:12.230 回答