Question

我想创建一个“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">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>

Answer 1

看起来你已经有了位置部分，而且你在问延迟部分？

像setTimeout这样的东西可以起作用

$(document).ready(function() { 
  setTimeout(function() {
    $('#live-chat').show();
  }, [delay in ms]);
}

您可能还想更改.show()以产生某种效果，以提醒用户它出现了。

Answer 2

试试这个：

<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>

祝你好运！

修改

将其滑入：

<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() { // Store our panel into a variable. var $myPanel = $("#live-chat"); // Get the height of the panel dynamically. var $myPanelHeight = parseInt($myPanel.height()); // Immediately set the opacity to 0 - to hide it and set its bottom to minus its height. $myPanel.css({ "opacity" : 0, "bottom" : "-" + $myPanelHeight + "px" }); // Set a timeout for the panel to slide and fade in. setTimeout(function() { $myPanel.animate({ // The CSS properties we want to animate (opacity and bottom position). opacity: 1, bottom: '0' }, 2000, function() { // Animation complete. // You can put other code here to do something after it has slid-in. }); }, 30000); // 30 seconds in MS }); </script> <div id="live-chat" style="position: absolute; bottom: 0px; right:100px; z-index:5;"> <h4>Need Help?</h4> <p>Click the link below for assistance</p> <a href="live-chat.php">Chat with a salesman</a> </div>

Answer 3

您可以使用jQuery的延迟功能

$(document).ready(function() {
    var miliseconds = 30000 //30 seconds
    $("#live-chat").delay(miliseconds).hide();
}

这是代码的jsfiddle示例：jsfiddle

Answer 4

以下是我要求的功能的起点:)谢谢大家！我用迈克尔的例子......

<!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>

如何创建出现在窗口底角的DIV（经过一段时间后）？

4 个答案: