我正在使用一些代码来显示通知消息。
下面的代码显示了单击按钮时的消息。
有什么方法可以在页面加载时显示消息，我打算使用“类型”作为变量在消息之间进行选择。
任何帮助，将不胜感激。谢谢
完整的代码可以在以下位置找到：
http://www.red-team-design.com/cool-notification-messages-with-css3-jquery#comment-168574
<head>
<title>Cool notification messages with CSS3 & Jquery demo - Redteamdesign</title>
<script src="../js/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../css/bar.css">
<script>
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages()
{
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++)
{
messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
});
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++)
{
showMessage(myMessages[i]);
}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
setTimeout(function(){hideAllMessages()},4000);
});
</script>
</head>
<body>
<div class="info message">
<h3>FYI, something just happened!</h3>
<p>This is just an info notification message.</p>
</div>
<div class="error message">
<h3>Oh No!, an error ocurred</h3>
<p>This is just an error notification message.</p>
</div>
<div class="warning message">
<h3>Wait, I must warn you!</h3>
<p>This is just a warning notification message.</p>
</div>
<div class="success message">
<h3>Congrats, you did it!</h3>
<p>This is just a success notification message.</p>
</div>
<ul id="trigger-list">
<li><a href="#" class="trigger info-trigger">Info</a></li>
<li><a href="#" class="trigger error-trigger">Error</a></li>
<li><a href="#" class="trigger warning-trigger">Warning</a></li>
<li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>
</body>
最佳答案
为了满足您的特定要求（无需等待按钮就立即显示消息），可以在ready函数的末尾（setTimeout(function(){hideAllMessages()},4000);之后）添加它
var type="warning";
$('.'+type).animate({top:"0"}, 500);
您可以将“警告”替换为“信息”，“错误”或“成功”（或其他要添加的内容）。
关于php - 在页面加载时运行javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15205854/