1

我想创建一个“实时聊天产品”弹出窗口，在我们的访问者到达特定页面后出现在屏幕底部，并且已经在该页面上停留了 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>
4

4 回答 4

1

看起来你已经得到了位置部分，你在问延迟部分？

像这样的东西setTimeout可以工作

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

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

于 2012-07-18T16:55:23.343 回答
0

试试这个：

<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>
于 2012-07-18T16:58:14.810 回答
0

你可以使用jQuery的延迟功能

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

这是您的代码的 jsfiddle 示例：jsfiddle

于 2012-07-18T17:02:37.357 回答
0

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

<!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>
于 2012-07-18T17:10:01.423 回答