Javascript 如何创建一个显示在窗口下角的DIV（经过一段时间）？
我想创建一个“LiveChat产品”弹出窗口，在我们的访问者到达某个特定页面后显示在屏幕底部，并且已经在该页面上停留了30秒左右。如果可能的话，我想保留jQuery/CSS代码Javascript 如何创建一个显示在窗口下角的DIV（经过一段时间）？,javascript,jquery,css,Javascript,Jquery,Css,我想创建一个“LiveChat产品”弹出窗口，在我们的访问者到达某个特定页面后显示在屏幕底部，并且已经在该页面上停留了30秒左右。如果可能的话，我想保留jQuery/CSS代码 <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript">S
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">Some jQuery that will change the 'display:hidden;' to 'display:block;' on the DIV after 30 seconds</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
<a href="live-chat.php">Chat with a salesman</a>
</div>
某些jQuery将更改“display:hidden；”“显示：块；”30秒后在DIV上
看起来你已经得到了位置部分，你是在问延迟部分
类似于这样的setTimeout
功能可以正常工作
$(document).ready(function() {
setTimeout(function() {
$('#live-chat').show();
}, [delay in ms]);
}
您可能还想更改.show（）
，以产生某种效果，提醒用户它出现了。看起来您已经获得了位置部分，您正在询问延迟部分
类似于这样的setTimeout
功能可以正常工作
$(document).ready(function() {
setTimeout(function() {
$('#live-chat').show();
}, [delay in ms]);
}
您可能还想更改.show（）
，以产生某种效果，提醒用户它出现了。尝试以下操作：
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
<a href="live-chat.php">Chat with a salesman</a>
</div>
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#实时聊天”）.css（{“display”：“block”}）；
}，30000）；//30秒（毫秒）
});
试试这个：
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 30000); // 30 seconds in MS
});
</script>
<div id="live-chat" style="position:absolute;bottom:0px; right:100px;z-index:5;display:none;>
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
<a href="live-chat.php">Chat with a salesman</a>
</div>
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#实时聊天”）.css（{“display”：“block”}）；
}，30000）；//30秒（毫秒）
});
您可以使用jQuery的延迟函数
$(document).ready(function() {
var miliseconds = 30000 //30 seconds
$("#live-chat").delay(miliseconds).hide();
}
下面是代码的JSFIDLE示例：您可以使用jQuery的延迟函数
$(document).ready(function() {
var miliseconds = 30000 //30 seconds
$("#live-chat").delay(miliseconds).hide();
}
下面是一个代码的JSFIDLE示例：以下是一个具有我要求的功能的起点：）谢谢大家！我用迈克尔的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 5000); // 30 seconds in MS
});
</script>
</head>
<body>
<div id="live-chat" style="width:250px; height:150px; position:absolute; bottom:0px; right:100px; z-index:5; display:none; border:#ccc 1px dashed;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
<a href="live-chat.php">Chat with a salesman</a>
</div>
</body>
</html>
无标题文件
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#实时聊天”）.css（{“display”：“block”}）；
}，5000）；//30秒（毫秒）
});
需要帮助吗？
单击下面的链接以获取帮助
以下是我想要的功能的起点：）谢谢大家！我用迈克尔的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#live-chat").css({ "display" : "block" });
}, 5000); // 30 seconds in MS
});
</script>
</head>
<body>
<div id="live-chat" style="width:250px; height:150px; position:absolute; bottom:0px; right:100px; z-index:5; display:none; border:#ccc 1px dashed;">
<h4>Need Help?</h4>
<p>Click the link below for assistance</p>
<a href="live-chat.php">Chat with a salesman</a>
</div>
</body>
</html>
无标题文件
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#实时聊天”）.css（{“display”：“block”}）；
}，5000）；//30秒（毫秒）
});
需要帮助吗？
单击下面的链接以获取帮助
。。。您当前的HTML+CSS有什么问题？请使用setTimeout（）
创建一个计时器。您是要创建这个计时器，还是希望其他人为您创建它？最好也合并一些-webkit CSS转换。但如果需要的话，我主要需要一些jQuery和/或Javascript方面的指导……我想自己确定如何做到这一点。。。。。。您当前的HTML+CSS有什么问题？请使用setTimeout（）
创建一个计时器。您是要创建这个计时器，还是希望其他人为您创建它？最好也合并一些-webkit CSS转换。但如果需要的话，我主要需要一些jQuery和/或Javascript方面的指导…我想自己学习如何做到这一点…好的，我会尝试一下。看来这样就行了！这对我有用。添加了一些额外的（化妆品）风格的DIV和瞧！这段代码非常完美。非常感谢！我将如何将slideIn效果（jQuery）合并到这个中？我需要使用css的“Visibility”属性，还是可以使用jQuery幻灯片效果？您可以使用jQuery animate（）方法，该方法允许您在某些（而不是所有）css属性上设置动画。有关示例，请参见上面的“我的编辑”。我还没有测试这段代码，所以如果它不起作用，请告诉我。基本上，使用JS，我计算面板的高度并将其底部属性偏移到屏幕外。然后我在中设置动画。作为一个额外的奖励，我也加入了一个不透明的东西…所以它会同时滑动和淡入。如果您不想这样做，只需删除对不透明度淡入淡出内容的引用。希望能有帮助。先生，您是一名芭蕾舞者。。。我试图让这家伙在几秒钟后反转动画。回到底部…好的，我来试试。看来这样就行了！这对我有用。添加了一些额外的（化妆品）风格的DIV和瞧！这段代码非常完美。非常感谢！我将如何将slideIn效果（jQuery）合并到这个中？我需要使用css的“Visibility”属性，还是可以使用jQuery幻灯片效果？您可以使用jQuery animate（）方法，该方法允许您在某些（而不是所有）css属性上设置动画。有关示例，请参见上面的“我的编辑”。我还没有测试这段代码，所以如果它不起作用，请告诉我。基本上，使用JS，我计算面板的高度并将其底部属性偏移到屏幕外。然后我在中设置动画。作为一个额外的奖励，我也加入了一个不透明的东西…所以它会同时滑动和淡入。如果您不想这样做，只需删除对不透明度淡入淡出内容的引用。希望能有帮助。先生，您是一名芭蕾舞者。。。我试图让这家伙在几秒钟后反转动画。返回底部…感谢您的输入。非常感谢你的投入。非常感谢我很可能会添加一些脚本，在20秒后隐藏窗口，使用上面相同的脚本将其返回到隐藏状态应该很容易。谢谢大家：）不用担心。请参阅上面的“我的编辑”以了解更多的滑入和淡入。我很可能会添加一些脚本，这些脚本将在20秒后隐藏窗口，使用上面相同的脚本将窗口恢复为隐藏状态应该很容易。谢谢大家：）不用担心。请参见上面的“我的编辑”以了解更多的滑入和淡入。